feat(theme): new colors for the components (#77)

feat(theme): new colors for the components (#72)

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @openui-org/react
 
+## 0.13.0
+
+### Minor Changes
+
+- Add new component Sheet
+
 ## 0.12.1
 
 ### Patch Changes

packages/react/package.json

@@ -1,7 +1,7 @@
 {
  "name": "@openui-org/react",
  "type": "module",
- "version": "0.12.1",
+ "version": "0.13.0",
  "description": "Open UI. A modern design system built with Shadcn UI and Tailwindcss",
  "author": "",
  "license": "MIT",

packages/theme/README.md

@@ -0,0 +1,3 @@
+# @openui-org/theme
+
+The theme official of Open UI

packages/theme/src/index.ts

@@ -1,3 +1,2 @@
-export * from './colors'
 export * from './shadcn-ui'
 export * from './tailwindcss'

packages/theme/src/shadcn-ui.ts

@@ -1,80 +1,21 @@
 export const cssBase = {
- '*': {
- 'font-family': 'var(--font-archivo)',
- },
  ':root': {
  /* Colors */
- /* -- Color success -- */
- '--success-50': '140 92 95',
- '--success-100': '141 88 84',
- '--success-200': '141 89 76',
- '--success-300': '141 89 65',
- '--success-400': '141 89 58',
- '--success-500': '141 100 47',
- '--success-600': '141 100 43',
- '--success-700': '141 100 33',
- '--success-800': '141 100 26',
- '--success-900': '141 100 20',
-
- /* -- Color primary */
- '--primary-50': '64 92 95',
- '--primary-100': '64 88 84',
- '--primary-200': '64 89 76',
- '--primary-300': '64 89 65',
- '--primary-400': '64 89 58',
- '--primary-500': '64 100 47',
- '--primary-600': '64 100 43',
- '--primary-700': '64 100 33',
- '--primary-800': '64 100 26',
- '--primary-900': '64 100 20',
-
- /* -- Color secondary */
- '--secondary-50': '204 100 97',
- '--secondary-100': '204 94 94',
- '--secondary-200': '201 94 86',
- '--secondary-300': '199 95 74',
- '--secondary-400': '198 93 60',
- '--secondary-500': '199 89 48',
- '--secondary-600': '201 96 32',
- '--secondary-700': '201 90 27',
- '--secondary-800': '202 80 24',
- '--secondary-900': '204 80 16',
-
- /* -- Color danger */
- '--error-50': '0 92 95',
- '--error-100': '0 88 84',
- '--error-200': '0 89 76',
- '--error-300': '0 89 65',
- '--error-400': '0 89 58',
- '--error-500': '0 100 47',
- '--error-600': '0 100 43',
- '--error-700': '0 100 33',
- '--error-800': '0 100 26',
- '--error-900': '0 100 20',
-
- /* -- Color warn */
- '--warn-50': '35 92 95',
- '--warn-100': '35 88 84',
- '--warn-200': '35 89 76',
- '--warn-300': '35 89 65',
- '--warn-400': '35 89 58',
- '--warn-500': '35 100 47',
- '--warn-600': '35 100 43',
- '--warn-700': '35 100 33',
- '--warn-800': '35 100 26',
- '--warn-900': '35 100 20',
-
- /* -- Color dark */
- '--dark-50': '180 19 89',
- '--dark-100': '180 10 80',
- '--dark-200': '180 7 70',
- '--dark-300': '180 7 70',
- '--dark-400': '180 4 45',
- '--dark-500': '180 6 37',
- '--dark-600': '180 8 25',
- '--dark-700': '180 10 20',
- '--dark-800': '180 13 6',
- '--dark-900': '200 100 1',
+ '--background': '0 0% 100%',
+ '--foreground': '222.2 47.4% 11.2%',
+ '--muted': '210 40% 96.1%',
+ '--muted-foreground': '215.4 16.3% 46.9%',
+ '--card': '0 0% 100%',
+ '--card-foreground': '222.2 47.4% 11.2%',
+ '--popover': '0 0% 100%',
+ '--popover-foreground': '222.2 47.4% 11.2%',
+ '--border': '214.3 31.8% 91.4%',
+ '--input': '214.3 31.8% 91.4%',
+ '--primary': '222.2 47.4% 11.2%',
+ '--primary-foreground': '210 40% 98%',
+ '--ring': '215 20.2% 65.1%',
+ '--error': '0 100% 50%',
+ '--error-foreground': '210 40% 98%',
 
  /* Box Sahdow */
  '--shadow-sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
@@ -92,8 +33,5 @@ export const cssBase = {
  '--radius-md': '0.75rem',
  '--radius-lg': '0.875rem',
  '--radius-full': '50%',
-
- /** Font family */
- '--font-archivo': '"Archivo", sans-serif',
  },
 }

packages/theme/src/tailwindcss.ts

@@ -1,6 +1,4 @@
 import type { Config } from 'tailwindcss'
-import { fontFamily } from 'tailwindcss/defaultTheme'
-import { dark, error, primary, secondary, success, warn } from './colors'
 import { boxShadow } from './box-shadows'
 import { borderRadius } from './radius'
 import { container } from './screens'
@@ -12,18 +10,42 @@ export const config: Config = {
  container,
  extend: {
  colors: {
- success,
- primary,
- secondary,
- warn,
- dark,
- error,
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))',
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))',
+ },
+ error: {
+ DEFAULT: 'hsl(var(--error))',
+ foreground: 'hsl(var(--error-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))',
+ },
  },
  boxShadow,
  borderRadius,
- fontFamily: {
- archivo: ['var(--font-archivo)', ...fontFamily.sans],
- },
  keyframes: {
  'accordion-down': {
  from: { height: '0' },