diff --git a/apps/mobile/App.tsx b/apps/mobile/App.tsx index 5ad604cf..04b5b6f1 100644 --- a/apps/mobile/App.tsx +++ b/apps/mobile/App.tsx @@ -1,16 +1,68 @@ +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable import/namespace */ import 'expo-dev-client' -import React from 'react' +import React, { useState } from 'react' -import { Shape } from '@status-im/components' -import { TamaguiProvider } from '@tamagui/core' +import { Code, Heading, Label, Paragraph, Shape } from '@status-im/components' +import { Stack, TamaguiProvider } from '@tamagui/core' +import { useFonts } from 'expo-font' +import { SafeAreaView, TouchableOpacity } from 'react-native' import tamaguiConfig from './tamagui.config' +type ThemeVars = 'light' | 'dark' + export default function App() { + const [theme, setTheme] = useState('light') + const [loaded] = useFonts({ + Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'), + InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'), + // Tamagui does this for you on web, but you need to do it manually on native. Only for the demo. We should seek a better solution. + UbuntuMono: require('./assets/fonts/UbuntuMono.ttf'), + }) + + if (!loaded) { + return null + } + return ( - - + + + + + Communities + + + This is an Heading 2 + + + Paragraph uppercased and bolded + + + This is a paragraph + + + This is a code line + 0x213abc190 ... 121ah4a9e + + + Theme selected - {theme} + setTheme(theme === 'dark' ? 'light' : 'dark')} + > + Toogle theme + + + ) } diff --git a/apps/mobile/assets/fonts/UbuntuMono.ttf b/apps/mobile/assets/fonts/UbuntuMono.ttf new file mode 100644 index 00000000..4977028d Binary files /dev/null and b/apps/mobile/assets/fonts/UbuntuMono.ttf differ diff --git a/apps/vite/src/app.css b/apps/vite/src/app.css index 2c5e2ef5..2b0fa9a5 100644 --- a/apps/vite/src/app.css +++ b/apps/vite/src/app.css @@ -1,7 +1,7 @@ #root { - max-width: 1280px; margin: 0 auto; - padding: 2rem; + padding: 0; + width: 100%; text-align: center; } diff --git a/apps/vite/src/app.tsx b/apps/vite/src/app.tsx index 23998e35..cad04d67 100644 --- a/apps/vite/src/app.tsx +++ b/apps/vite/src/app.tsx @@ -1,24 +1,44 @@ import './app.css' -import { Shape } from '@status-im/components' -import { TamaguiProvider } from '@tamagui/core' +import React, { useState } from 'react' + +import { Code, Heading, Label, Paragraph, Shape } from '@status-im/components' +import { Stack, TamaguiProvider } from '@tamagui/core' import tamaguiConfig from '../tamagui.config' -import { Circle } from './components/circle' + +type ThemeVars = 'light' | 'dark' function App() { + const [theme, setTheme] = useState('light') + return ( - -
-
-

Vite

- -
-
-

UI

- -
-
+ + + + This is an Heading 1 + + This is an Heading 2 + + + This is a paragraph + + + This is a code + 0x213abc190 ... 121ah4a9e + Theme selected - {theme} + + + + ) } diff --git a/apps/vite/src/index.css b/apps/vite/src/index.css index 44e7886f..bc857f7b 100644 --- a/apps/vite/src/index.css +++ b/apps/vite/src/index.css @@ -6,7 +6,7 @@ color-scheme: light dark; color: rgba(255, 255, 255, 0.87); - background-color: #fff; + width: 100%; font-synthesis: none; text-rendering: optimizeLegibility; @@ -27,7 +27,7 @@ a:hover { body { margin: 0; display: flex; - place-items: center; + width: 100%; min-width: 320px; min-height: 100vh; } diff --git a/packages/components/src/animations.ts b/packages/components/src/animations.ts index f73a75f2..cb721cd4 100644 --- a/packages/components/src/animations.ts +++ b/packages/components/src/animations.ts @@ -1,3 +1,4 @@ +import { createAnimations as createAnimationsCSS } from '@tamagui/animations-css' import { createAnimations } from '@tamagui/animations-react-native' export const animations = createAnimations({ @@ -19,3 +20,9 @@ export const animations = createAnimations({ stiffness: 250, }, }) + +export const animationsCSS = createAnimationsCSS({ + fast: 'ease-in 150ms', + medium: 'ease-in 300ms', + slow: 'ease-in 450ms', +}) diff --git a/packages/components/src/global.ts b/packages/components/src/global.ts index 2dd1c75c..68d9aaca 100644 --- a/packages/components/src/global.ts +++ b/packages/components/src/global.ts @@ -1,8 +1,10 @@ +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable @typescript-eslint/no-empty-interface */ import { config } from './tamagui.config' export type Conf = typeof config -declare module 'tamagui' { +declare module '@tamagui/core' { interface TamaguiCustomConfig extends Conf {} } diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 201feac2..7ad66607 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -1,2 +1,3 @@ export * from './shape' export { config } from './tamagui.config' +export * from './typography' diff --git a/packages/components/src/shape/shape.tsx b/packages/components/src/shape/shape.tsx index b38d37e4..82bff05b 100644 --- a/packages/components/src/shape/shape.tsx +++ b/packages/components/src/shape/shape.tsx @@ -1,15 +1,16 @@ import { Stack, styled } from '@tamagui/core' export const Shape = styled(Stack, { - backgroundColor: 'pink', + backgroundColor: '$primary', width: 100, - height: 100 + height: 100, + cursor: 'pointer', + animation: 'fast', + borderRadius: '$4', + hoverStyle: { + backgroundColor: '$primaryHover', + }, + pressStyle: { + backgroundColor: '$primaryHover', + }, }) - -// import { styled, YStack } from 'tamagui' - -// export const MyComponent = styled(YStack, { -// backgroundColor: 'pink', -// width: 100, -// height: 100 -// }) diff --git a/packages/components/src/stories/Page.stories.js b/packages/components/src/stories/Page.stories.js index 3f0a5465..90531e3c 100644 --- a/packages/components/src/stories/Page.stories.js +++ b/packages/components/src/stories/Page.stories.js @@ -1,6 +1,6 @@ -import { within, userEvent } from '@storybook/testing-library'; +import { userEvent, within } from '@storybook/testing-library' -import { Page } from './Page'; +import { Page } from './Page' export default { title: 'Example/Page', @@ -9,17 +9,17 @@ export default { // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout layout: 'fullscreen', }, -}; +} -export const LoggedOut = {}; +export const LoggedOut = {} // More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing export const LoggedIn = { play: async ({ canvasElement }) => { - const canvas = within(canvasElement); + const canvas = within(canvasElement) const loginButton = await canvas.getByRole('button', { name: /Log in/i, - }); - await userEvent.click(loginButton); + }) + await userEvent.click(loginButton) }, -}; +} diff --git a/packages/components/src/tamagui.config.ts b/packages/components/src/tamagui.config.ts index ee11904e..7e083d67 100644 --- a/packages/components/src/tamagui.config.ts +++ b/packages/components/src/tamagui.config.ts @@ -1,99 +1,113 @@ -import { createTamagui } from '@tamagui/core' -import { themes, tokens } from '@tamagui/theme-base' +import { createFont, createTamagui } from '@tamagui/core' +import { createInterFont } from '@tamagui/font-inter' +import { createMedia } from '@tamagui/react-native-media-driver' +import { shorthands } from '@tamagui/shorthands' -export type AppConfig = typeof config -declare module '@tamagui/core' { - // overrides TamaguiCustomConfig so your custom types - // work everywhere you import `tamagui` - type TamaguiCustomConfig = AppConfig -} +import { animations, animationsCSS } from './animations' +import { themes } from './themes' +import { tokens } from './tokens' -export const config = createTamagui({ - fonts: {}, - themes, - tokens +const interFont = createInterFont({ + size: { + 6: 11, + 7: 13, + 8: 15, + 9: 19, + 10: 27, + }, + transform: { + 6: 'uppercase', + 7: 'none', + }, + weight: { + 6: '400', + 7: '500', + 8: '600', + }, + letterSpacing: { + 5: 2, + 6: 1, + 7: 0, + 8: -1, + 9: -2, + 10: -3, + 12: -4, + 14: -5, + 15: -6, + }, + face: { + 400: { normal: 'Inter' }, + 500: { normal: 'Inter' }, + 600: { normal: 'InterBold' }, + }, }) -// export const styled = config -// export default config +const monoFont = createFont({ + family: 'UbuntuMono', + weight: { + 1: '500', + }, + letterSpacing: { + 5: 2, + 6: 1, + 7: 0, + 8: -1, + 9: -2, + 10: -3, + 12: -4, + 14: -5, + 15: -6, + }, + size: { + 1: 11, + 2: 12, + 3: 13, + 4: 14, + 5: 16, + 6: 18, + 7: 20, + 8: 22, + 9: 30, + 10: 42, + 11: 52, + 12: 62, + 13: 72, + 14: 92, + 15: 114, + 16: 124, + }, + lineHeight: { + 1: 14, + 2: 15, + }, +}) -// import { createTamagui } from 'tamagui' -// import { createInterFont } from '@tamagui/font-inter' -// import { shorthands } from '@tamagui/shorthands' -// import { themes, tokens } from '@tamagui/theme-base' -// import { createMedia } from '@tamagui/react-native-media-driver' - -// import { animations } from './animations' - -// const headingFont = createInterFont({ -// size: { -// 6: 15, -// }, -// transform: { -// 6: 'uppercase', -// 7: 'none', -// }, -// weight: { -// 6: '400', -// 7: '700', -// }, -// color: { -// 6: '$colorFocus', -// 7: '$color', -// }, -// letterSpacing: { -// 5: 2, -// 6: 1, -// 7: 0, -// 8: -1, -// 9: -2, -// 10: -3, -// 12: -4, -// 14: -5, -// 15: -6, -// }, -// face: { -// 700: { normal: 'InterBold' }, -// }, -// }) - -// const bodyFont = createInterFont( -// { -// face: { -// 700: { normal: 'InterBold' }, -// }, -// }, -// { -// sizeSize: (size) => Math.round(size * 1.1), -// sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)), -// } -// ) - -// export const config = createTamagui({ -// animations, -// shouldAddPrefersColorThemes: true, -// themeClassNameOnRoot: true, -// shorthands, -// fonts: { -// heading: headingFont, -// body: bodyFont, -// }, -// themes, -// tokens, -// media: createMedia({ -// xs: { maxWidth: 660 }, -// sm: { maxWidth: 800 }, -// md: { maxWidth: 1020 }, -// lg: { maxWidth: 1280 }, -// xl: { maxWidth: 1420 }, -// xxl: { maxWidth: 1600 }, -// gtXs: { minWidth: 660 + 1 }, -// gtSm: { minWidth: 800 + 1 }, -// gtMd: { minWidth: 1020 + 1 }, -// gtLg: { minWidth: 1280 + 1 }, -// short: { maxHeight: 820 }, -// tall: { minHeight: 820 }, -// hoverNone: { hover: 'none' }, -// pointerCoarse: { pointer: 'coarse' }, -// }), -// }) +export const config = createTamagui({ + fonts: { + inter: interFont, + mono: monoFont, + }, + themes, + tokens, + media: createMedia({ + xs: { maxWidth: 660 }, + sm: { maxWidth: 800 }, + md: { maxWidth: 1020 }, + lg: { maxWidth: 1280 }, + xl: { maxWidth: 1420 }, + xxl: { maxWidth: 1600 }, + gtXs: { minWidth: 660 + 1 }, + gtSm: { minWidth: 800 + 1 }, + gtMd: { minWidth: 1020 + 1 }, + gtLg: { minWidth: 1280 + 1 }, + short: { maxHeight: 820 }, + tall: { minHeight: 820 }, + hoverNone: { hover: 'none' }, + pointerCoarse: { pointer: 'coarse' }, + }), + shorthands, + animations: { + ...animations, + ...animationsCSS, + }, +}) diff --git a/packages/components/src/themes.ts b/packages/components/src/themes.ts new file mode 100644 index 00000000..4d895ca8 --- /dev/null +++ b/packages/components/src/themes.ts @@ -0,0 +1,74 @@ +import { createTheme } from '@tamagui/core' + +import { tokens } from './tokens' + +const light = createTheme({ + background: tokens.color['white-100'], + textPrimary: tokens.color['neutral-100'], + primary: tokens.color['primary-50'], + primaryHover: tokens.color['primary-60'], + success: tokens.color['success-50'], + successHover: tokens.color['success-60'], + danger: tokens.color['danger-50'], + dangerHover: tokens.color['danger-60'], + purple: tokens.color['purple-50'], + purpleHover: tokens.color['purple-60'], + indigo: tokens.color['indigo-50'], + indigoHover: tokens.color['indigo-60'], + turquoise: tokens.color['turquoise-50'], + turquoiseHover: tokens.color['turquoise-60'], + blue: tokens.color['blue-50'], + blueHover: tokens.color['blue-60'], + green: tokens.color['green-50'], + greenHover: tokens.color['green-60'], + yellow: tokens.color['yellow-50'], + yellowHover: tokens.color['yellow-60'], + orange: tokens.color['orange-50'], + orangeHover: tokens.color['orange-60'], + red: tokens.color['red-50'], + redHover: tokens.color['red-60'], + pink: tokens.color['pink-50'], + pinkHover: tokens.color['pink-60'], + brown: tokens.color['brown-50'], + brownHover: tokens.color['brown-60'], + beige: tokens.color['beige-50'], + beigeHover: tokens.color['beige-60'], +}) + +const dark = createTheme({ + background: tokens.color['neutral-95'], + textPrimary: tokens.color['white-100'], + primary: tokens.color['primary-60'], + primaryHover: tokens.color['primary-50'], + success: tokens.color['success-60'], + successHover: tokens.color['success-50'], + danger: tokens.color['danger-60'], + dangerHover: tokens.color['danger-50'], + purple: tokens.color['purple-60'], + purpleHover: tokens.color['purple-50'], + indigo: tokens.color['indigo-60'], + indigoHover: tokens.color['indigo-50'], + turquoise: tokens.color['turquoise-60'], + turquoiseHover: tokens.color['turquoise-50'], + blue: tokens.color['blue-60'], + blueHover: tokens.color['blue-50'], + green: tokens.color['green-60'], + greenHover: tokens.color['green-50'], + yellow: tokens.color['yellow-60'], + yellowHover: tokens.color['yellow-50'], + orange: tokens.color['orange-60'], + orangeHover: tokens.color['orange-50'], + red: tokens.color['red-60'], + redHover: tokens.color['red-50'], + pink: tokens.color['pink-60'], + pinkHover: tokens.color['pink-50'], + brown: tokens.color['brown-60'], + brownHover: tokens.color['brown-50'], + beige: tokens.color['beige-60'], + beigeHover: tokens.color['beige-50'], +}) + +export const themes = { + light, + dark, +} diff --git a/packages/components/src/tokens.ts b/packages/components/src/tokens.ts new file mode 100644 index 00000000..54b74ce5 --- /dev/null +++ b/packages/components/src/tokens.ts @@ -0,0 +1,188 @@ +import { createTokens } from '@tamagui/core' +import { radius, size, space, zIndex } from '@tamagui/theme-base' + +export const tokens = createTokens({ + color: { + 'neutral-5': 'hsla(220, 18%, 97%, 1)', + 'neutral-10': 'hsla(216, 20%, 95%, 1)', + 'neutral-20': 'hsla(214, 17%, 92%, 1)', + 'neutral-30': 'hsla(213, 15%, 88%, 1)', + 'neutral-40': 'hsla(219, 17%, 69%, 1)', + 'neutral-50': 'hsla(218, 14%, 45%, 1)', + 'neutral-60': 'hsla(219, 28%, 26%, 1)', + 'neutral-70': 'hsla(219, 35%, 19%, 1)', + 'neutral-80': 'hsla(219, 38%, 17%, 1)', + 'neutral-90': 'hsla(219, 42%, 13%, 1)', + 'neutral-95': 'hsla(218, 48%, 10%, 1)', + 'neutral-100': 'hsla(218, 51%, 7%, 1)', + 'neutral-5-opa-70': 'hsla(220, 18%, 97%, 0.7)', + 'neutral-90-opa-70': 'hsla(219, 42%, 13%, 0.7)', + 'neutral-95-opa-70': 'hsla(218, 48%, 10%, 0.7)', + 'neutral-80-opa-5': 'hsla(219, 38%, 17%, 0.05)', + 'neutral-80-opa-10': 'hsla(219, 38%, 17%, 0.1)', + 'neutral-80-opa-20': 'hsla(219, 38%, 17%, 0.2)', + 'neutral-80-opa-30': 'hsla(219, 38%, 17%, 0.3)', + 'neutral-80-opa-40': 'hsla(219, 38%, 17%, 0.4)', + 'neutral-80-opa-50': 'hsla(219, 38%, 17%, 0.5)', + 'neutral-80-opa-60': 'hsla(219, 38%, 17%, 0.6)', + 'neutral-80-opa-70': 'hsla(219, 38%, 17%, 0.7)', + 'neutral-80-opa-80': 'hsla(219, 38%, 17%, 0.8)', + 'neutral-80-opa-90': 'hsla(219, 38%, 17%, 0.9)', + 'neutral-80-opa-95': 'hsla(219, 38%, 17%, 0.95)', + 'neutral-80-opa-100': 'hsla(219, 38%, 17%, 1)', + 'white-5': 'hsla(0, 0%, 100%, 0.05)', + 'white-10': 'hsla(0, 0%, 100%, 0.1)', + 'white-20': 'hsla(0, 0%, 100%, 0.2)', + 'white-30': 'hsla(0, 0%, 100%, 0.3)', + 'white-40': 'hsla(0, 0%, 100%, 0.4)', + 'white-50': 'hsla(0, 0%, 100%, 0.5)', + 'white-60': 'hsla(0, 0%, 100%, 0.6)', + 'white-70': 'hsla(0, 0%, 100%, 0.7)', + 'white-80': 'hsla(0, 0%, 100%, 0.8)', + 'white-90': 'hsla(0, 0%, 100%, 0.9)', + 'white-95': 'hsla(0, 0%, 100%, 0.95)', + 'white-100': 'hsla(0, 0%, 100%, 1)', + 'primary-50': 'hsla(229, 71%, 57%, 1)', + 'primary-60': 'hsla(229, 54%, 45%, 1)', + 'primary-50-opa-5': 'hsla(229, 71%, 57%, 0.05)', + 'primary-50-opa-10': 'hsla(229, 71%, 57%, 0.1)', + 'primary-50-opa-20': 'hsla(229, 71%, 57%, 0.2)', + 'primary-50-opa-30': 'hsla(229, 71%, 57%, 0.3)', + 'primary-50-opa-40': 'hsla(229, 71%, 57%, 0.4)', + 'success-50': 'hsla(174, 63%, 40%, 1)', + 'success-60': 'hsla(174, 63%, 34%, 1)', + 'success-50-opa-5': 'hsla(174, 63%, 40%, 0.05)', + 'success-50-opa-10': 'hsla(174, 63%, 40%, 0.1)', + 'success-50-opa-20': 'hsla(174, 63%, 40%, 0.2)', + 'success-50-opa-30': 'hsla(174, 63%, 40%, 0.3)', + 'success-50-opa-40': 'hsla(174, 63%, 40%, 0.4)', + 'danger-50': 'hsla(1, 73%, 63%, 1)', + 'danger-60': 'hsla(2, 48%, 53%, 1)', + 'danger-50-opa-5': 'hsla(1, 73%, 63%, 0.05)', + 'danger-50-opa-10': 'hsla(1, 73%, 63%, 0.1)', + 'danger-50-opa-20': 'hsla(1, 73%, 63%, 0.2)', + 'danger-50-opa-30': 'hsla(1, 73%, 63%, 0.3)', + 'danger-50-opa-40': 'hsla(1, 73%, 63%, 0.4)', + 'purple-50': 'hsla(263, 44%, 57%, 1)', + 'purple-60': 'hsla(260, 33%, 41%, 1)', + 'purple-50-opa-5': 'hsla(263, 44%, 57%, 0.05)', + 'purple-50-opa-10': 'hsla(263, 44%, 57%, 0.1)', + 'purple-50-opa-20': 'hsla(263, 44%, 57%, 0.2)', + 'purple-50-opa-30': 'hsla(263, 44%, 57%, 0.3)', + 'purple-50-opa-40': 'hsla(263, 44%, 57%, 0.4)', + 'indigo-50': 'background: hsla(217, 30%, 41%, 1)', + 'indigo-60': 'background: hsla(217, 31%, 35%, 1)', + 'indigo-50-opa-5': 'background: hsla(217, 30%, 41%, 0.05)', + 'indigo-50-opa-10': 'background: hsla(217, 30%, 41%, 0.1)', + 'indigo-50-opa-20': 'background: hsla(217, 30%, 41%, 0.2)', + 'indigo-50-opa-30': 'background: hsla(217, 30%, 41%, 0.3)', + 'indigo-50-opa-40': 'background: hsla(217, 30%, 41%, 0.4)', + 'turquoise-50': 'hsla(193, 41%, 45%, 1)', + 'turquoise-60': 'hsla(193, 41%, 38%, 1)', + 'turquoise-50-opa-5': 'hsla(193, 41%, 45%, 0.05)', + 'turquoise-50-opa-10': 'hsla(193, 41%, 45%, 0.1)', + 'turquoise-50-opa-20': 'hsla(193, 41%, 45%, 0.2)', + 'turquoise-50-opa-30': 'hsla(193, 41%, 45%, 0.3)', + 'turquoise-50-opa-40': 'hsla(193, 41%, 45%, 0.4)', + 'blue-50': 'hsla(202, 84%, 62%, 1)', + 'blue-60': 'hsla(202, 56%, 52%, 1)', + 'blue-50-opa-5': 'hsla(202, 84%, 62%, 0.05)', + 'blue-50-opa-10': 'hsla(202, 84%, 62%, 0.1)', + 'blue-50-opa-20': 'hsla(202, 84%, 62%, 0.2)', + 'blue-50-opa-30': 'hsla(202, 84%, 62%, 0.3)', + 'blue-50-opa-40': 'hsla(202, 84%, 62%, 0.4)', + 'green-50': 'hsla(151, 53%, 58%, 1)', + 'green-60': 'hsla(151, 38%, 48%, 1)', + 'green-50-opa-5': 'hsla(151, 53%, 58%, 0.05)', + 'green-50-opa-10': 'hsla(151, 53%, 58%, 0.1)', + 'green-50-opa-20': 'hsla(151, 53%, 58%, 0.2)', + 'green-50-opa-30': 'hsla(151, 53%, 58%, 0.3)', + 'green-50-opa-40': 'hsla(151, 53%, 58%, 0.4)', + 'yellow-50': 'hsla(42, 100%, 66%, 1)', + 'yellow-60': 'hsla(42, 64%, 56%, 1)', + 'yellow-50-opa-5': 'hsla(42, 100%, 66%, 0.05)', + 'yellow-50-opa-10': 'hsla(42, 100%, 66%, 0.1)', + 'yellow-50-opa-20': 'hsla(42, 100%, 66%, 0.2)', + 'yellow-50-opa-30': 'hsla(42, 100%, 66%, 0.3)', + 'yellow-50-opa-40': 'hsla(42, 100%, 66%, 0.4)', + 'orange-50': 'hsla(18, 95%, 68%, 1)', + 'orange-60': 'hsla(18, 60%, 57%, 1)', + 'orange-50-opa-5': 'hsla(18, 95%, 68%, 0.05)', + 'orange-50-opa-10': 'hsla(18, 95%, 68%, 0.1)', + 'orange-50-opa-20': 'hsla(18, 95%, 68%, 0.2)', + 'orange-50-opa-30': 'hsla(18, 95%, 68%, 0.3)', + 'orange-50-opa-40': 'hsla(18, 95%, 68%, 0.4)', + 'red-50': 'hsla(0, 87%, 68%, 1)', + 'red-60': 'hsla(0, 54%, 57%, 1)', + 'red-50-opa-5': 'hsla(0, 87%, 68%, 0.05)', + 'red-50-opa-10': 'hsla(0, 87%, 68%, 0.1)', + 'red-50-opa-20': 'hsla(0, 87%, 68%, 0.2)', + 'red-50-opa-30': 'hsla(0, 87%, 68%, 0.3)', + 'red-50-opa-40': 'hsla(0, 87%, 68%, 0.4)', + 'pink-50': 'hsla(338, 96%, 74%, 1)', + 'pink-60': 'hsla(337, 56%, 62%, 1)', + 'pink-50-opa-5': 'hsla(338, 96%, 74%, 0.05)', + 'pink-50-opa-10': 'hsla(338, 96%, 74%, 0.1)', + 'pink-50-opa-20': 'hsla(338, 96%, 74%, 0.2)', + 'pink-50-opa-30': 'hsla(338, 96%, 74%, 0.3)', + 'pink-50-opa-40': 'hsla(338, 96%, 74%, 0.4)', + 'brown-50': 'hsla(15, 33%, 45%, 1)', + 'brown-60': 'hsla(15, 33%, 38%, 1)', + 'brown-50-opa-5': 'hsla(15, 33%, 45%, 0.05)', + 'brown-50-opa-10': 'hsla(15, 33%, 45%, 0.1)', + 'brown-50-opa-20': 'hsla(15, 33%, 45%, 0.2)', + 'brown-50-opa-30': 'hsla(15, 33%, 45%, 0.3)', + 'brown-50-opa-40': 'hsla(15, 33%, 45%, 0.4)', + 'beige-50': 'hsla(29, 34%, 68%, 1)', + 'beige-60': 'hsla(29, 21%, 58%, 1)', + 'beige-50-opa-5': 'hsla(29, 34%, 68%, 0.05)', + 'beige-50-opa-10': 'hsla(29, 34%, 68%, 0.1)', + 'beige-50-opa-20': 'hsla(29, 34%, 68%, 0.2)', + 'beige-50-opa-30': 'hsla(29, 34%, 68%, 0.3)', + 'beige-50-opa-40': 'hsla(29, 34%, 68%, 0.4)', + 'identifier-1': 'hsla(0, 0%, 0%, 1)', + 'identifier-2': 'hsla(120, 100%, 50%, 1)', + 'identifier-3': 'hsla(60, 100%, 50%, 1)', + 'identifier-4': 'hsla(0, 100%, 50%, 1)', + 'identifier-5': 'hsla(300, 100%, 50%, 1)', + 'identifier-6': 'hsla(240, 100%, 50%, 1)', + 'identifier-7': 'hsla(180, 100%, 50%, 1)', + 'identifier-8': 'hsla(0, 1%, 44%, 1)', + 'identifier-9': 'hsla(120, 100%, 30%, 1)', + 'identifier-10': 'hsla(61, 100%, 34%, 1)', + 'identifier-11': 'hsla(0, 100%, 30%, 1)', + 'identifier-12': 'hsla(300, 100%, 28%, 1)', + 'identifier-13': 'hsla(240, 100%, 26%, 1)', + 'identifier-14': 'hsla(186, 100%, 29%, 1)', + 'identifier-15': 'hsla(0, 0%, 77%, 1)', + 'identifier-16': 'hsla(123, 100%, 86%, 1)', + 'identifier-17': 'hsla(60, 100%, 85%, 1)', + 'identifier-18': 'hsla(0, 100%, 81%, 1)', + 'identifier-19': 'hsla(300, 100%, 85%, 1)', + 'identifier-20': 'hsla(252, 100%, 75%, 1)', + 'identifier-21': 'hsla(180, 100%, 88%, 1)', + 'identifier-22': 'hsla(0, 0%, 91%, 1)', + 'identifier-23': 'hsla(45, 100%, 54%, 1)', + 'identifier-24': 'hsla(11, 100%, 60%, 1)', + 'identifier-25': 'hsla(324, 100%, 50%, 1)', + 'identifier-26': 'hsla(277, 100%, 50%, 1)', + 'identifier-27': 'hsla(204, 94%, 61%, 1)', + 'identifier-28': 'hsla(165, 100%, 47%, 1)', + 'identifier-29': 'hsla(0, 0%, 100%, 1)', + 'identifier-30': 'hsla(12, 38%, 45%, 1)', + 'identifier-31': 'hsla(324, 100%, 39%, 1)', + 'identifier-32': 'hsla(40, 100%, 30%, 1)', + ethereum: 'hsla(227, 75%, 69%, 1)', + optimism: 'hsla(0, 72%, 67%, 1)', + arbitrum: 'hsla(192, 82%, 68%, 1)', + zksync: 'hsla(239, 98%, 81%, 1)', + hermez: 'hsla(15, 77%, 65%, 1)', + xdai: 'hsla(179, 51%, 50%, 1)', + polygon: 'hsla(268, 84%, 70%, 1)', + unknown: 'hsla(206, 26%, 95%, 1)', + }, + size, + space, + zIndex, + radius, +}) diff --git a/packages/components/src/typography/index.tsx b/packages/components/src/typography/index.tsx new file mode 100644 index 00000000..324025ef --- /dev/null +++ b/packages/components/src/typography/index.tsx @@ -0,0 +1 @@ +export * from './typography' diff --git a/packages/components/src/typography/typography.tsx b/packages/components/src/typography/typography.tsx new file mode 100644 index 00000000..23d929e6 --- /dev/null +++ b/packages/components/src/typography/typography.tsx @@ -0,0 +1,166 @@ +import { styled } from '@tamagui/core' +import { SizableText } from 'tamagui' + +export const Heading = styled(SizableText, { + name: 'Heading', + fontFamily: '$inter', + color: '$textPrimary', + + variants: { + heading: { + h1: { + fontSize: 27, + lineHeight: 32, + letterSpacing: '-0.021em', + }, + h2: { + fontSize: 19, + lineHeight: 26, + letterSpacing: '-0.016em', + }, + }, + uppercase: { + true: { + textTransform: 'uppercase', + }, + }, + weight: { + regular: { + fontWeight: '400', + }, + medium: { + fontWeight: '500', + }, + semibold: { + fontWeight: '600', + }, + }, + } as const, + defaultVariants: { + // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale + size: '$true', + heading: 'h1', + }, +}) + +export const Paragraph = styled(SizableText, { + name: 'Paragraph', + fontFamily: '$inter', + color: '$textPrimary', + + variants: { + variant: { + normal: { + fontSize: 15, + lineHeight: 22, + letterSpacing: '-0.009em', + }, + smaller: { + fontSize: 13, + lineHeight: 18, + letterSpacing: '-0.003em', + }, + }, + uppercase: { + true: { + textTransform: 'uppercase', + }, + }, + weight: { + regular: { + fontWeight: '400', + }, + medium: { + fontWeight: '500', + }, + semibold: { + fontWeight: '600', + }, + }, + } as const, + defaultVariants: { + // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale + size: '$true', + variant: 'normal', + weight: 'regular', + }, +}) + +export const Label = styled(SizableText, { + name: 'Label', + fontFamily: '$inter', + color: '$textPrimary', + + fontSize: 11, + lineHeight: 16, + letterSpacing: '-0.005em', + + variants: { + uppercase: { + true: { + textTransform: 'uppercase', + }, + }, + weight: { + regular: { + fontWeight: '400', + }, + medium: { + fontWeight: '500', + }, + semibold: { + fontWeight: '600', + }, + }, + } as const, + defaultVariants: { + // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale + size: '$true', + weight: 'regular', + }, +}) + +export const Code = styled(SizableText, { + name: 'Code', + fontFamily: '$mono', + color: '$textPrimary', + + fontSize: 11, + lineHeight: 16, + letterSpacing: '-0.005em', + + variants: { + normal: { + fontSize: 15, + lineHeight: 22, + letterSpacing: '-0.009em', + }, + smaller: { + fontSize: 13, + lineHeight: 18, + letterSpacing: '-0.003em', + }, + uppercase: { + true: { + textTransform: 'uppercase', + }, + }, + weight: { + regular: { + fontWeight: '400', + }, + medium: { + fontWeight: '500', + }, + semibold: { + fontWeight: '600', + }, + }, + } as const, + defaultVariants: { + // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale + size: '$true', + variant: 'normal', + weight: 'regular', + }, +})