Merge pull request #42 from SySagar/dev

style: added font tokens

.changeset/young-ads-notice.md

@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': minor
+---
+
+font tokens added

apps/ui/lib/index.tsx

@@ -1,3 +1,4 @@
+import '@groovy-box/tokens/src/fonts.css';
 import './tailwind.css';
 
 export * from './components/Button';

apps/ui/tailwind.config.ts

@@ -1,6 +1,10 @@
 import plugin from 'tailwindcss/plugin';
 import type { Config } from 'tailwindcss';
-import { colors, customTypographyClasses } from '@groovy-box/tokens';
+import {
+ colors,
+ customTypographyClasses,
+ groovyFontFamily,
+} from '@groovy-box/tokens';
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -9,7 +13,9 @@ module.exports = {
  './stories/**/*.{ts,tsx,js,jsx}',
  ],
  theme: {
- extend: {},
+ extend: {
+ fontFamily: groovyFontFamily,
+ },
  colors,
  },
  plugins: [

packages/tokens/package.json

@@ -1,12 +1,16 @@
 {
  "name": "@groovy-box/tokens",
- "version": "1.0.1",
+ "version": "1.0.0",
+ "private": true,
  "description": "Design tokens for groovy box",
  "main": "src/index.ts",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
- "license": "ISC"
+ "license": "ISC",
+ "devDependencies": {
+ "tailwindcss": "^3.4.7"
+ }
 }

packages/tokens/src/fonts.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

packages/tokens/src/typography/base.ts

@@ -1,100 +1,41 @@
+const createTypographyClass = (
+ className,
+ fontSize,
+ lineHeight,
+ fontWeight,
+ letterSpacing = 'normal',
+) => ({
+ [className]: {
+ fontSize,
+ lineHeight,
+ fontWeight,
+ fontFamily: 'Inter, sans-serif',
+ letterSpacing,
+ },
+});
+
+export const groovyFontFamily = {
+ Inter: ['Inter', 'sans-serif'],
+};
+
 export const customTypographyClasses = {
- '.typo-body-1': {
- fontSize: '16px',
- lineHeight: '24px',
- fontWeight: '400',
- },
- '.typo-body-2': {
- fontSize: '14px',
- lineHeight: '20px',
- fontWeight: '400',
- },
- '.typo-body-3': {
- fontSize: '12px',
- lineHeight: '16px',
- fontWeight: '400',
- },
- '.typo-button-1': {
- fontSize: '16px',
- lineHeight: '26px',
- fontWeight: '500',
- letterSpacing: '0.1px',
- },
- '.typo-button-2': {
- fontSize: '14px',
- lineHeight: '20px',
- fontWeight: '500',
- },
- '.typo-button-3': {
- fontSize: '12px',
- lineHeight: '16px',
- fontWeight: '500',
- },
- '.typo-heading-1': {
- fontSize: '28px',
- lineHeight: '36px',
- fontWeight: '400',
- },
- '.typo-heading-2': {
- fontSize: '24px',
- lineHeight: '30px',
- fontWeight: '600',
- },
- '.typo-heading-3': {
- fontSize: '20px',
- lineHeight: '26px',
- fontWeight: '600',
- },
- '.typo-heading-4': {
- fontSize: '18px',
- lineHeight: '24px',
- fontWeight: '600',
- },
- '.typo-heading-5': {
- fontSize: '16px',
- lineHeight: '22px',
- fontWeight: '600',
- },
- '.typo-heading-6': {
- fontSize: '14px',
- lineHeight: '20px',
- fontWeight: '600',
- },
- '.typo-label-1': {
- fontSize: '14px',
- lineHeight: '20px',
- fontWeight: '400',
- letterSpacing: '-0.24px',
- },
- '.typo-label-2': {
- fontSize: '12px',
- lineHeight: '16px',
- fontWeight: '400',
- },
- '.typo-label-2-strong': {
- fontSize: '12px',
- lineHeight: '16px',
- fontWeight: '500',
- },
- '.typo-label-3': {
- fontSize: '10px',
- lineHeight: '12px',
- fontWeight: '400',
- },
- '.typo-subtitle-1': {
- fontSize: '16px',
- lineHeight: '22px',
- fontWeight: '500',
- letterSpacing: '0.1px',
- },
- '.typo-subtitle-2': {
- fontSize: '14px',
- lineHeight: '20px',
- fontWeight: '500',
- },
- '.typo-subtitle-3': {
- fontSize: '12px',
- lineHeight: '16px',
- fontWeight: '500',
- },
+ ...createTypographyClass('.typo-body-1', '16px', '24px', '400'),
+ ...createTypographyClass('.typo-body-2', '14px', '20px', '400'),
+ ...createTypographyClass('.typo-body-3', '12px', '16px', '400'),
+ ...createTypographyClass('.typo-button-1', '16px', '26px', '500', '0.1px'),
+ ...createTypographyClass('.typo-button-2', '14px', '20px', '500'),
+ ...createTypographyClass('.typo-button-3', '12px', '16px', '500'),
+ ...createTypographyClass('.typo-heading-1', '28px', '36px', '400'),
+ ...createTypographyClass('.typo-heading-2', '24px', '30px', '600'),
+ ...createTypographyClass('.typo-heading-3', '20px', '26px', '600'),
+ ...createTypographyClass('.typo-heading-4', '18px', '24px', '600'),
+ ...createTypographyClass('.typo-heading-5', '16px', '22px', '600'),
+ ...createTypographyClass('.typo-heading-6', '14px', '20px', '600'),
+ ...createTypographyClass('.typo-label-1', '14px', '20px', '400', '-0.24px'),
+ ...createTypographyClass('.typo-label-2', '12px', '16px', '400'),
+ ...createTypographyClass('.typo-label-2-strong', '12px', '16px', '500'),
+ ...createTypographyClass('.typo-label-3', '10px', '12px', '400'),
+ ...createTypographyClass('.typo-subtitle-1', '16px', '22px', '500', '0.1px'),
+ ...createTypographyClass('.typo-subtitle-2', '14px', '20px', '500'),
+ ...createTypographyClass('.typo-subtitle-3', '12px', '16px', '500'),
 };