Add colors semantics and commons (#340)

openlabs-dev · Jun 13, 2024 · f080a0e · f080a0e
1 parent a8a01fc
commit f080a0e
Show file tree

Hide file tree

Showing 22 changed files with 440 additions and 120 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "package.json"
   ],
   "scripts": {
-    "dev": "pnpm dev:playground",
+    "dev": "pnpm build && pnpm install && pnpm dev:playground",
     "lint": "eslint . --fix",
     "dev:playground": "pnpm -r --filter playground dev",
     "clean": "pnpx rimraf dist pnpm-lock.yaml node_modules",
@@ -62,6 +62,7 @@
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",
     "color": "4.2.3",
+    "color2k": "2.0.3",
     "deepmerge": "4.3.1",
     "embla-carousel-react": "8.0.0",
     "flat": "5.0.2",
@@ -97,8 +98,14 @@
     "typescript": "5.4.2"
   },
   "tsup": {
-    "entry": ["./src/index.ts", "./src/tailwind.ts"],
-    "format": ["esm", "cjs"],
+    "entry": [
+      "./src/index.ts",
+      "./src/tailwind.ts"
+    ],
+    "format": [
+      "esm",
+      "cjs"
+    ],
     "clean": true,
     "target": "es2019"
   },

diff --git a/playground/app/layout.tsx b/playground/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         {children}
       </body>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/plugins/animations.ts b/src/plugins/animations.ts
@@ -46,55 +46,55 @@ export const animations = {
     'pulse-fade-in': {
       '0%': {
         transform: 'scale(0.9)',
-        opacity: '0',
+        opacity: 0,
       },
       '50%': {
         transform: 'scale(1.05)',
-        opacity: '0.5',
+        opacity: 0.5,
       },
       '100%': {
         transform: 'scale(1)',
-        opacity: '1',
+        opacity: 1,
       },
     },
     'dialog-in': {
       '0%': {
         transform: 'translate(-50%, -50%) scale(0.9)',
-        opacity: '0',
+        opacity: 0,
       },
       '100%': {
         transform: 'translate(-50%, -50%) scale(1)',
-        opacity: '1',
+        opacity: 1,
       },
     },
     'dialog-out': {
       '0%': {
         transform: 'translate(-50%, -50%) scale(1)',
-        opacity: '1',
+        opacity: 1,
       },
       '100%': {
         transform: 'translate(-50%, -50%) scale(0.9)',
-        opacity: '0',
+        opacity: 0,
       },
     },
     'dropdown-in': {
       '0%': {
         transform: 'scale(0.9)',
-        opacity: '0',
+        opacity: 0,
       },
       '100%': {
         transform: 'scale(1)',
-        opacity: '1',
+        opacity: 1,
       },
     },
     'dropdown-out': {
       '0%': {
         transform: 'scale(1)',
-        opacity: '1',
+        opacity: 1,
       },
       '100%': {
         transform: 'scale(.9)',
-        opacity: '0',
+        opacity: 0,
       },
     },
   },

diff --git a/src/plugins/base.ts b/src/plugins/base.ts
@@ -2,37 +2,31 @@ import type { LayoutTheme } from '@typings/theme'
 
 export const baseTheme: LayoutTheme = {
   fontSize: {
-    small: '0.875rem',
-    medium: '1rem',
-    large: '1.125rem',
+    small: '12px',
+    medium: '16px',
+    large: '20px',
   },
   radius: {
-    small: 'calc(0.5rem - 2px)',
-    medium: 'calc(0.5rem - 4px)',
-    large: ' 0.5rem',
+    small: '2px',
+    medium: '4px',
+    large: '8px',
   },
   lineHeight: {
-    small: '1.25rem',
-    medium: '1.5rem',
-    large: '1.75rem',
+    small: '16px',
+    medium: '20px',
+    large: '24px',
   },
   borderWidth: {
-    small: '0.063rem',
-    medium: '0.125rem',
-    large: '0.188rem',
+    small: '1px',
+    medium: '2px',
+    large: '3px',
   },
   boxShadow: {
-    small: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-    medium: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0,0.23)',
-    large: ' 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
+    small: '0px 2px 16px 0px rgba(0, 0, 0, 0.12)',
+    medium: '0px 8px 24px 0px rgba(0, 0, 0, 0.16)',
+    large: ' 0px 16px 48px -4px rgba(0, 0, 0, 0.24)',
   },
 }
 
 export const lightTheme: LayoutTheme = {}
-export const darkTheme: LayoutTheme = {
-  boxShadow: {
-    small: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-    medium: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
-    large: ' 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
-  },
-}
+export const darkTheme: LayoutTheme = {}
diff --git a/src/plugins/colors/azure.ts b/src/plugins/colors/azure.ts
@@ -0,0 +1,12 @@
+export const azure = {
+  50: '#F5F8FF',
+  100: '#D8E4FD',
+  200: '#B4CDFD',
+  300: '#75A3FF',
+  400: '#4D7FFF',
+  500: '#305EFF',
+  600: '#2920DA',
+  700: '#2243B6',
+  800: '#1B3591',
+  900: '#14286D',
+}
diff --git a/src/plugins/colors/cider.ts b/src/plugins/colors/cider.ts
@@ -0,0 +1,12 @@
+export const cider = {
+  50: '#FFF3EB',
+  100: '#FFE1CC',
+  200: '#FFC499',
+  300: '#FFAC70',
+  400: '#FF9040',
+  500: '#FF7A1A',
+  600: '#E9690C',
+  700: '#C65C10',
+  800: '#A24D10',
+  900: '#813E0E',
+}
diff --git a/src/plugins/colors/cloud.ts b/src/plugins/colors/cloud.ts
@@ -0,0 +1,12 @@
+export const cloud = {
+  50: '#EDF4F7',
+  100: '#E6EFF4',
+  200: '#CBDDE6',
+  300: '#97BBCD',
+  400: '#6091A9',
+  500: '#387594',
+  600: '#1F5C7A',
+  700: '#1D4B63',
+  800: '#143D52',
+  900: '#032A3E',
+}
diff --git a/src/plugins/colors/commons.ts b/src/plugins/colors/commons.ts
@@ -0,0 +1,21 @@
+import { azure } from './azure'
+import { cider } from './cider'
+import { cloud } from './cloud'
+import { crimson } from './crimson'
+import { emerald } from './emerald'
+import { sapphire } from './sapphire'
+import { sea } from './sea'
+import { neutral } from './neutral'
+
+export const commonColors = {
+  white: '#ffffff',
+  black: '#000000',
+  azure,
+  cider,
+  cloud,
+  crimson,
+  emerald,
+  sapphire,
+  sea,
+  neutral,
+}
diff --git a/src/plugins/colors/crimson.ts b/src/plugins/colors/crimson.ts
@@ -0,0 +1,12 @@
+export const crimson = {
+  50: '#FFF5F5',
+  100: '#FEE4E2',
+  200: '#FEC6C3',
+  300: '#FD9D96',
+  400: '#F96C62',
+  500: '#F04428',
+  600: '#D92D20',
+  700: '#B42318',
+  800: '#9A0E0E',
+  900: '#880C0C',
+}
diff --git a/src/plugins/colors/emerald.ts b/src/plugins/colors/emerald.ts
@@ -0,0 +1,12 @@
+export const emerald = {
+  50: '#EBFAF3',
+  100: '#DAF5E8',
+  200: '#B6ECD1',
+  300: '#91E3BA',
+  400: '#48D08C',
+  500: '#00BD5F',
+  600: '#00A251',
+  700: '#008743',
+  800: '#006C36',
+  900: '#005128',
+}
diff --git a/src/plugins/colors/index.ts b/src/plugins/colors/index.ts
@@ -1,60 +1,9 @@
-import type { BaseColors } from '@typings/theme'
+import { commonColors } from './commons'
+import { semanticColors } from './semantics'
 
-export const colors: BaseColors = {
-  light: {
-    background: {
-      DEFAULT: '#ffffff',
-    },
-    foreground: {
-      DEFAULT: '#000000',
-    },
-    default: {
-      DEFAULT: '#d4d4d4',
-      foreground: '#ffffff',
-    },
-    primary: {
-      DEFAULT: '#1a5cff',
-      foreground: '#ffffff',
-    },
-    success: {
-      DEFAULT: '#46c93a',
-      foreground: '#ffffff',
-    },
-    warn: {
-      DEFAULT: '#FFBA00',
-      foreground: '#ffffff',
-    },
-    error: {
-      DEFAULT: '#ff4757',
-      foreground: '#ffffff',
-    },
-  },
-  dark: {
-    background: {
-      DEFAULT: '#000000',
-    },
-    foreground: {
-      DEFAULT: '#ffffff',
-    },
-    default: {
-      DEFAULT: '#262626',
-      foreground: '#ffffff',
-    },
-    primary: {
-      DEFAULT: '#1a5cff',
-      foreground: '#ffffff',
-    },
-    success: {
-      DEFAULT: '#46c93a',
-      foreground: '#ffffff',
-    },
-    warn: {
-      DEFAULT: '#FFBA00',
-      foreground: '#ffffff',
-    },
-    error: {
-      DEFAULT: '#ff4757',
-      foreground: '#ffffff',
-    },
-  },
+const colors = {
+  ...commonColors,
+  ...semanticColors,
 }
+
+export { colors, commonColors, semanticColors }
diff --git a/src/plugins/colors/neutral.ts b/src/plugins/colors/neutral.ts
@@ -0,0 +1,12 @@
+export const neutral = {
+  50: '#fafafa',
+  100: '#f4f4f5',
+  200: '#e4e4e7',
+  300: '#d4d4d8',
+  400: '#a1a1aa',
+  500: '#71717a',
+  600: '#52525b',
+  700: '#3f3f46',
+  800: '#27272a',
+  900: '#18181b',
+}
diff --git a/src/plugins/colors/sapphire.ts b/src/plugins/colors/sapphire.ts
@@ -0,0 +1,12 @@
+export const sapphire = {
+  50: '#E7F6FE',
+  100: '#CFEDFC',
+  200: '#A8DFFA',
+  300: '#79CEF8',
+  400: '#57C1F6',
+  500: '#15B0F3',
+  600: '#1291D0',
+  700: '#0F78AD',
+  800: '#0C608A',
+  900: '#094868',
+}
diff --git a/src/plugins/colors/sea.ts b/src/plugins/colors/sea.ts
@@ -0,0 +1,12 @@
+export const sea = {
+  50: '#EDF7F7',
+  100: '#E2F3F3',
+  200: '#C2E0E0',
+  300: '#97CDCD',
+  400: '#60A9A9',
+  500: '#389494',
+  600: '#1F7A7A',
+  700: '#1D6363',
+  800: '#145252',
+  900: '#033E3E',
+}