From 42a7a736b83f2adb00bb5c56e4623b786bed88d9 Mon Sep 17 00:00:00 2001 From: paulclindo Date: Thu, 23 Nov 2023 00:19:03 -0500 Subject: [PATCH] unify system design in visor --- apps/shinkai-visor/tailwind.config.js | 106 +------------------------- libs/shinkai-ui/src/shinkai-preset.js | 55 ++++++++++++- 2 files changed, 55 insertions(+), 106 deletions(-) diff --git a/apps/shinkai-visor/tailwind.config.js b/apps/shinkai-visor/tailwind.config.js index 57257c50b..7213059c9 100644 --- a/apps/shinkai-visor/tailwind.config.js +++ b/apps/shinkai-visor/tailwind.config.js @@ -1,11 +1,11 @@ /** @type {import('tailwindcss').Config} */ const { join } = require('path'); -const defaultTheme = require('tailwindcss/defaultTheme'); const { createGlobPatternsForDependencies } = require('@nx/react/tailwind'); +const sharedTailwindConfig = require('../../libs/shinkai-ui/src/shinkai-preset.js'); module.exports = { - darkMode: ['class'], + presets: [sharedTailwindConfig], content: [ join( __dirname, @@ -13,106 +13,4 @@ module.exports = { ), ...createGlobPatternsForDependencies(__dirname), ], - theme: { - container: { - center: true, - padding: '2rem', - screens: { - '2xl': '1400px', - }, - }, - extend: { - border: { - input: 'hsl(var(--input))', - }, - colors: { - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - background: 'hsl(var(--background))', - // foreground: 'hsl(var(--foreground))', - primary: { - 600: '#FF7E7F', - 700: '#FF5E5F', - 800: '#FF3E3F', - }, - foreground: '#FFFFFF', - 'muted-foreground': '#c7c7c7', - secondary: { - 600: '#19242D', - }, - // primary: { - // DEFAULT: 'hsl(var(--primary))', - // foreground: 'hsl(var(--primary-foreground))', - // }, - // secondary: { - // DEFAULT: 'hsl(var(--secondary))', - // foreground: 'hsl(var(--secondary-foreground))', - // }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))', - }, - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))', - }, - }, - backgroundImage: { - 'app-gradient': - 'linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.20) 100%)', - }, - borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)', - }, - keyframes: { - 'accordion-down': { - from: { height: '0' }, - to: { height: 'var(--radix-accordion-content-height)' }, - }, - 'accordion-up': { - from: { height: 'var(--radix-accordion-content-height)' }, - to: { height: '0' }, - }, - breath: { - '0%, 100%': { transform: 'opacity: 1' }, - '50%': { transform: 'opacity: .5' }, - }, - 'big-bounce': { - '0%, 100%': { - transform: 'translateY(-75%)', - 'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)', - }, - '50%': { - transform: 'translateY(0)', - 'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)', - }, - }, - }, - animation: { - 'accordion-down': 'accordion-down 0.2s ease-out', - 'accordion-up': 'accordion-up 0.2s ease-out', - breath: 'pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;', - 'big-bounce': 'big-bounce 1s infinite', - }, - fontFamily: { - inter: ['Inter', ...defaultTheme.fontFamily.sans], - }, - }, - }, - plugins: [require('tailwindcss-animate')], }; diff --git a/libs/shinkai-ui/src/shinkai-preset.js b/libs/shinkai-ui/src/shinkai-preset.js index ca759edff..0319f6e4f 100644 --- a/libs/shinkai-ui/src/shinkai-preset.js +++ b/libs/shinkai-ui/src/shinkai-preset.js @@ -1,8 +1,11 @@ /** @type {import('tailwindcss').Config} */ const tailwindTypography = require('@tailwindcss/typography'); const tailwindAnimate = require('tailwindcss-animate'); +const defaultTheme = require('tailwindcss/defaultTheme'); module.exports = { content: [], + darkMode: ['class'], + theme: { container: { center: true, @@ -36,15 +39,47 @@ module.exports = { }, foreground: '#FFFFFF', 'muted-foreground': '#c7c7c7', + // TODO: remove visor + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + }, + border: { + input: 'hsl(var(--input))', }, fontFamily: { - inter: ['Inter', 'sans-serif'], - newake: ['Newake', 'sans-serif'], + inter: ['Inter', ...defaultTheme.fontFamily.sans], }, backgroundImage: { 'app-gradient': 'linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.20) 100%)', }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)', + }, keyframes: { 'accordion-down': { from: { height: '0' }, @@ -54,10 +89,26 @@ module.exports = { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: '0' }, }, + breath: { + '0%, 100%': { transform: 'opacity: 1' }, + '50%': { transform: 'opacity: .5' }, + }, + 'big-bounce': { + '0%, 100%': { + transform: 'translateY(-75%)', + 'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)', + }, + '50%': { + transform: 'translateY(0)', + 'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)', + }, + }, }, animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', + breath: 'pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;', + 'big-bounce': 'big-bounce 1s infinite', }, }, },