frappe-ui 0.1.246 → 0.1.248

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.246",
+  "version": "0.1.248",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,
@@ -49,6 +49,7 @@
     "scripts",
     "vite",
     "icons",
+    "tailwind",
     "tsconfig.base.json"
   ],
   "repository": {

package/src/components/DatePicker/DateTimePicker.vue

@@ -127,7 +127,7 @@
                 :disabled="dateObj.disabled"
                 @click="
                   !dateObj.disabled &&
-                    handleDateCellClick(dateObj.date, togglePopover)
+                  handleDateCellClick(dateObj.date, togglePopover)
                 "
               >
                 {{ dateObj.date.date() }}
@@ -268,7 +268,7 @@ const view = ref<ViewMode>('date')
 const currentYear = ref<number>(dayjs().year())
 const currentMonth = ref<number>(dayjs().month())
 const DATE_FORMAT = 'YYYY-MM-DD'
-const DATE_TIME_FORMAT = 'YYYY-MM-DD h:mm a'
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
 
 const selectedDate = ref<string>('') // YYYY-MM-DD
 const timeValue = ref<string>('') // HH:mm:ss

package/src/utils/tailwind.config.js

@@ -1,4 +1,4 @@
-import preset from '../tailwind/preset.js'
+import preset from '../../tailwind/preset.js'
 console.warn(
   '`frappe-ui/src/utils/tailwind.config.js` is deprecated. Use `frappe-ui/tailwind/preset.js` instead.',
 )

package/tailwind/colorPalette.js

@@ -0,0 +1,131 @@
+import tailwindColors from 'tailwindcss/colors'
+import colorsData from './colors.json'
+
+function generateColorPalette() {
+  const colorPalette = {
+    inherit: tailwindColors.inherit,
+    current: tailwindColors.current,
+    transparent: tailwindColors.transparent,
+    black: tailwindColors.black,
+    white: tailwindColors.white,
+    gray: {},
+    blue: {},
+    green: {},
+    red: {},
+    orange: {},
+    yellow: {},
+    teal: {},
+    violet: {},
+    cyan: {},
+    amber: {},
+    pink: {},
+    purple: {},
+    'white-overlay': {},
+    'black-overlay': {},
+  }
+
+  Object.keys(colorsData.lightMode).forEach((color) => {
+    colorPalette[color] = colorsData.lightMode[color]
+  })
+  Object.keys(colorsData.darkMode).forEach((color) => {
+    colorPalette[`dark-${color}`] = colorsData.darkMode[color]
+  })
+
+  Object.keys(colorsData.overlay.white).forEach((shade) => {
+    colorPalette['white-overlay'][shade] = colorsData.overlay.white[shade]
+  })
+
+  Object.keys(colorsData.overlay.black).forEach((shade) => {
+    colorPalette['black-overlay'][shade] = colorsData.overlay.black[shade]
+  })
+
+  return colorPalette
+}
+
+function resolveColorReference(reference) {
+  const [mode, color, shade] = reference.split('/')
+  if (mode === 'lightMode') {
+    return colorsData.lightMode[color][shade]
+  } else if (mode === 'darkMode') {
+    return colorsData.darkMode[color][shade]
+  } else if (mode === 'overlay') {
+    return colorsData.overlay[color][shade]
+  } else if (mode === 'neutral') {
+    return colorsData.neutral[color]
+  }
+  return null
+}
+
+function generateCSSVariables() {
+  const output = {
+    ':root': {},
+    '[data-theme="dark"]': {},
+  }
+
+  // Generate CSS variables for light mode
+  Object.keys(colorsData.themedVariables.light).forEach((category) => {
+    Object.keys(colorsData.themedVariables.light[category]).forEach(
+      (colorName) => {
+        const variableName = `--${category}-${colorName}`
+        const reference = colorsData.themedVariables.light[category][colorName]
+        const lightValue = resolveColorReference(reference)
+        output[':root'][variableName] = lightValue
+      },
+    )
+  })
+
+  // Generate CSS variables for dark mode
+  Object.keys(colorsData.themedVariables.dark).forEach((category) => {
+    Object.keys(colorsData.themedVariables.dark[category]).forEach(
+      (colorName) => {
+        const variableName = `--${category}-${colorName}`
+        const reference = colorsData.themedVariables.dark[category][colorName]
+        const darkValue = resolveColorReference(reference)
+        output['[data-theme="dark"]'][variableName] = darkValue
+      },
+    )
+  })
+
+  // Generate CSS variables for each color shade
+  Object.keys(colorsData.lightMode).forEach((color) => {
+    Object.keys(colorsData.lightMode[color]).forEach((shade) => {
+      const variableName = `--${color}-${shade}`
+      const value = colorsData.lightMode[color][shade]
+      output[':root'][variableName] = value
+    })
+  })
+
+  Object.keys(colorsData.darkMode).forEach((color) => {
+    Object.keys(colorsData.darkMode[color]).forEach((shade) => {
+      const variableName = `--dark-${color}-${shade}`
+      const value = colorsData.darkMode[color][shade]
+      output['[data-theme="dark"]'][variableName] = value
+    })
+  })
+
+  return output
+}
+
+function generateSemanticColors() {
+  const output = {
+    outline: {},
+    surface: {},
+    ink: {},
+  }
+
+  // Generate semantic colors
+  Object.keys(colorsData.themedVariables.light).forEach((category) => {
+    Object.keys(colorsData.themedVariables.light[category]).forEach(
+      (colorName) => {
+        const variableName = `${category}-${colorName}`
+        const reference = colorsData.themedVariables.light[category][colorName]
+        const lightValue = resolveColorReference(reference)
+        output[category][colorName] = `var(--${variableName}, ${lightValue})`
+      },
+    )
+  })
+
+  return output
+}
+
+export { generateColorPalette, generateCSSVariables, generateSemanticColors }