frappe-ui 0.1.246 → 0.1.248

package/tailwind/plugin.js

@@ -0,0 +1,401 @@
+import plugin from 'tailwindcss/plugin'
+import {
+  generateColorPalette,
+  generateSemanticColors,
+  generateCSSVariables,
+} from './colorPalette.js'
+
+let colorPalette = generateColorPalette()
+let semanticColors = generateSemanticColors()
+let cssVariables = generateCSSVariables()
+
+let globalStyles = (theme) => ({
+  html: {
+    'font-family': `InterVar, ${theme('fontFamily.sans')}`,
+    'font-optical-sizing': 'auto',
+  },
+  'html, body, button, p, span, div': {
+    fontVariationSettings: "'opsz' 24",
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+  },
+  select: {
+    backgroundImage:
+      'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%237C7C7C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" aria-hidden="true" viewBox="0 0 24 24" ><path d="m6 9 6 6 6-6" /></svg>\')',
+    backgroundSize: '1.13em',
+    backgroundPosition: 'right 0.44rem center',
+  },
+})
+
+let componentStyles = {
+  '.form-input, .form-textarea, .form-select': {
+    '@apply h-7 rounded border border-[--surface-gray-2] bg-surface-gray-2 py-1.5 pl-2 pr-2 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3':
+      {},
+  },
+  '.form-checkbox': {
+    '@apply rounded-md bg-surface-gray-2 text-ink-blue-2 focus:ring-0 focus-visible:ring-1':
+      {},
+  },
+  "[data-theme='dark'] [type='checkbox']:checked": {
+    'background-image': `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230F0F0F' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")`,
+  },
+  "[data-theme='dark'] img": {
+    filter: 'brightness(.8) contrast(1.2)',
+  },
+}
+
+export default plugin(
+  function ({ addBase, addComponents, theme }) {
+    addBase({ ...globalStyles(theme), ...cssVariables })
+    addComponents(componentStyles)
+  },
+  {
+    theme: {
+      colors: colorPalette,
+      borderRadius: {
+        none: '0px', // 0
+        sm: '0.25rem', // 4px
+        DEFAULT: '0.5rem', // 8px
+        md: '0.625rem', // 10px
+        lg: '0.75rem', // 12px
+        xl: '1rem', // 16px
+        '2xl': '1.25rem', // 20px
+        full: '9999px', // 9999px
+      },
+      boxShadow: {
+        sm: '0px 1px 2px rgba(0, 0, 0, 0.1)',
+        DEFAULT:
+          '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)',
+        md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
+        lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
+        xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
+        '2xl':
+          '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)',
+        none: 'none',
+      },
+      container: {
+        padding: {
+          xl: '5rem',
+        },
+      },
+      fontSize: {
+        '2xs': [
+          '11px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.01em',
+            fontWeight: '420',
+          },
+        ],
+        xs: [
+          '12px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        sm: [
+          '13px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        base: [
+          '14px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        lg: [
+          '16px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.02em',
+            fontWeight: '400',
+          },
+        ],
+        xl: [
+          '18px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.01em',
+            fontWeight: '400',
+          },
+        ],
+        '2xl': [
+          '20px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.01em',
+            fontWeight: '400',
+          },
+        ],
+        '3xl': [
+          '24px',
+          {
+            lineHeight: '1.15',
+            fontWeight: 400,
+            letterSpacing: '0.005em',
+          },
+        ],
+        // font size for paragraphs
+        'p-2xs': [
+          '11px',
+          {
+            lineHeight: '1.6',
+            letterSpacing: '0.01em',
+            fontWeight: '420',
+          },
+        ],
+        'p-xs': [
+          '12px',
+          {
+            lineHeight: '1.6',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        'p-sm': [
+          '13px',
+          {
+            lineHeight: '1.5',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        'p-base': [
+          '14px',
+          {
+            lineHeight: '1.5',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        'p-lg': [
+          '16px',
+          {
+            lineHeight: '1.5',
+            letterSpacing: '0.02em',
+            fontWeight: '400',
+          },
+        ],
+        'p-xl': [
+          '18px',
+          {
+            lineHeight: '1.42',
+            letterSpacing: '0.01em',
+            fontWeight: '400',
+          },
+        ],
+        'p-2xl': [
+          '20px',
+          {
+            lineHeight: '1.38',
+            letterSpacing: '0.01em',
+            fontWeight: '400',
+          },
+        ],
+        'p-3xl': [
+          '24px',
+          {
+            lineHeight: '1.2',
+            fontWeight: 400,
+            letterSpacing: '0.005em',
+          },
+        ],
+      },
+      screens: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+      },
+      extend: {
+        textColor: {
+          ink: semanticColors.ink,
+        },
+        backgroundColor: {
+          surface: semanticColors.surface,
+        },
+        fill: {
+          ink: semanticColors.ink,
+          surface: semanticColors.surface,
+        },
+        stroke: {
+          ink: semanticColors.ink,
+        },
+        placeholderColor: {
+          ink: semanticColors.ink,
+        },
+        borderColor: () => ({
+          DEFAULT: 'var(--outline-gray-1)',
+          outline: semanticColors.outline,
+        }),
+        ringColor: {
+          outline: semanticColors.outline,
+        },
+        divideColor: {
+          outline: semanticColors.outline,
+        },
+        spacing: {
+          4.5: '1.125rem',
+          5.5: '1.375rem',
+          6.5: '1.625rem',
+          7.5: '1.875rem',
+          8.5: '2.125rem',
+          9.5: '2.375rem',
+          10.5: '2.625rem',
+          11.5: '2.875rem',
+          12.5: '3.125rem',
+          13: '3.25rem',
+          13.5: '3.375rem',
+          14.5: '3.625rem',
+          15: '3.75rem',
+          15.5: '3.875rem',
+        },
+        width: {
+          3.5: '0.875rem',
+          112: '28rem',
+          wizard: '650px',
+        },
+        height: {
+          3.5: '0.875rem',
+        },
+        minWidth: {
+          40: '10rem',
+          50: '18rem',
+        },
+        maxHeight: {
+          52: '13rem',
+        },
+        typography: (theme) => ({
+          DEFAULT: {
+            css: {
+              '--tw-prose-body': 'var(--ink-gray-8)',
+              '--tw-prose-headings': 'var(--ink-gray-9)',
+              '--tw-prose-lead': 'var(--ink-gray-5)',
+              '--tw-prose-links': 'var(--ink-gray-9)',
+              '--tw-prose-bold': 'var(--ink-gray-9)',
+              '--tw-prose-counters': 'var(--ink-gray-4)',
+              '--tw-prose-bullets': 'var(--ink-gray-2)',
+              '--tw-prose-hr': 'var(--ink-gray-1)',
+              '--tw-prose-quotes': 'var(--ink-gray-8)',
+              '--tw-prose-quote-borders': 'var(--ink-gray-1)',
+              '--tw-prose-captions': 'var(--ink-gray-4)',
+              '--tw-prose-kbd': 'var(--ink-gray-9)',
+              '--tw-prose-code': 'var(--ink-gray-9)',
+              '--tw-prose-pre-code': 'var(--ink-gray-1)',
+              '--tw-prose-pre-bg': 'var(--ink-gray-8)',
+              '--tw-prose-th-borders': 'var(--ink-gray-2)',
+              '--tw-prose-td-borders': 'var(--ink-gray-1)',
+              h1: {
+                fontWeight: 600,
+              },
+              h2: {
+                fontWeight: 600,
+              },
+              h3: {
+                fontWeight: 600,
+              },
+              h4: {
+                fontWeight: 600,
+              },
+              h5: {
+                fontWeight: 600,
+              },
+              'h1 strong': {
+                fontWeight: 600,
+              },
+              'h2 strong': {
+                fontWeight: 600,
+              },
+              'h3 strong': {
+                fontWeight: 600,
+              },
+              'h4 strong': {
+                fontWeight: 600,
+              },
+              'h5 strong': {
+                fontWeight: 600,
+              },
+              'img[data-align=right]': {
+                marginLeft: 'auto',
+                marginRight: '0',
+              },
+              'img[data-align=center]': {
+                marginLeft: 'auto',
+                marginRight: 'auto',
+              },
+            },
+          },
+          sm: {
+            css: {
+              fontSize: '14px',
+              fontWeight: 420,
+              lineHeight: 1.5,
+              letterSpacing: '0.02em',
+              h1: {
+                fontSize: em(20, 14),
+              },
+              h2: {
+                fontSize: em(18, 14),
+              },
+              h3: {
+                fontSize: em(16, 14),
+              },
+              h4: {
+                fontSize: em(14, 14),
+              },
+              h5: {
+                fontSize: em(13, 14),
+              },
+              p: {
+                marginTop: '0.5rem',
+                marginBottom: '0.5rem',
+              },
+              'ul > li': {
+                margin: '0.5rem 0',
+                '> p': {
+                  margin: '0.5rem 0',
+                },
+                '> p:first-child:last-child': {
+                  margin: '0.5rem 0',
+                },
+                '> p:first-child': {
+                  marginTop: '0.5rem',
+                },
+                '> p:last-child': {
+                  marginBottom: '0.5rem',
+                },
+              },
+              'ol > li': {
+                margin: '0.5rem 0',
+                '> p': {
+                  margin: '0.5rem 0',
+                },
+                '> p:first-child:last-child': {
+                  margin: '0.5rem 0',
+                },
+                '> p:first-child': {
+                  marginTop: '0.5rem',
+                },
+                '> p:last-child': {
+                  marginBottom: '0.5rem',
+                },
+              },
+            },
+          },
+        }),
+      },
+    },
+  }
+)
+
+function em(pixels, base = 16) {
+  return `${pixels / base}em`
+}

package/tailwind/preset.js

@@ -0,0 +1,9 @@
+import themePlugin from './plugin.js'
+import forms from '@tailwindcss/forms'
+import typography from '@tailwindcss/typography'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['selector', '[data-theme="dark"]'],
+  plugins: [forms, typography, themePlugin],
+}

package/tailwind/update-tailwind-classes.js

@@ -0,0 +1,102 @@
+import fs from 'fs'
+import path from 'path'
+import colors from './colors.json' assert { type: 'json' }
+
+function generateClassMap() {
+  const classMap = {
+    'text-white': 'text-ink-white',
+    'bg-white': 'bg-surface-white',
+  }
+
+  // Generate surface class map
+  Object.keys(colors.themedVariables.light.surface).forEach((key) => {
+    const reference = colors.themedVariables.light.surface[key]
+    const [mode, color, shade] = reference.split('/')
+    const className = `bg-${color}-${shade}`
+    const surfaceClassName = `bg-surface-${key}`
+    classMap[className] = surfaceClassName
+  })
+
+  // Generate outline class map
+  Object.keys(colors.themedVariables.light.outline).forEach((key) => {
+    const reference = colors.themedVariables.light.outline[key]
+    const [mode, color, shade] = reference.split('/')
+    const borderClassName = `border-${color}-${shade}`
+    const divideClassName = `divide-${color}-${shade}`
+    const ringClassName = `ring-${color}-${shade}`
+    const outlineClassName = `border-outline-${key}`
+    const divideOutlineClassName = `divide-outline-${key}`
+    const ringOutlineClassName = `ring-outline-${key}`
+    classMap[borderClassName] = outlineClassName
+    classMap[divideClassName] = divideOutlineClassName
+    classMap[ringClassName] = ringOutlineClassName
+  })
+
+  // Generate ink class map
+  Object.keys(colors.themedVariables.light.ink).forEach((key) => {
+    const reference = colors.themedVariables.light.ink[key]
+    const [mode, color, shade] = reference.split('/')
+    const className = `text-${color}-${shade}`
+    const inkClassName = `text-ink-${key}`
+    const placeholderClassName = `placeholder-${color}-${shade}`
+    const placeholderInkClassName = `placeholder-ink-${key}`
+    classMap[className] = inkClassName
+    classMap[placeholderClassName] = placeholderInkClassName
+  })
+
+  return classMap
+}
+
+function replaceClassesInFile(filePath, classMap) {
+  let fileContent = fs.readFileSync(filePath, 'utf8')
+  let classesChanged = 0
+
+  Object.keys(classMap).forEach((key) => {
+    const value = classMap[key]
+    const regex = new RegExp(`\\b${key}\\b`, 'g')
+    const matches = fileContent.match(regex)
+    if (matches) {
+      classesChanged += matches.length
+    }
+    fileContent = fileContent.replace(regex, value)
+  })
+
+  fs.writeFileSync(filePath, fileContent, 'utf8')
+  console.log(`Replaced ${classesChanged} classes in ${filePath}`)
+}
+
+function replaceClassesInFolder(targetPath, classMap) {
+  const files = fs.readdirSync(targetPath)
+
+  files.forEach((file) => {
+    const fullPath = path.join(targetPath, file)
+    const stat = fs.statSync(fullPath)
+
+    if (stat.isDirectory()) {
+      replaceClassesInFolder(fullPath, classMap)
+    } else if (stat.isFile()) {
+      replaceClassesInFile(fullPath, classMap)
+    }
+  })
+}
+
+function getPath() {
+  let targetPath = process.argv[2]
+  let fullPath = path.resolve(process.cwd(), targetPath)
+  if (fs.existsSync(fullPath)) {
+    return fullPath
+  }
+  console.error(`Invalid path: ${fullPath}`)
+  process.exit(1)
+}
+
+// Generate the class map
+const classMap = generateClassMap()
+
+const targetPath = getPath()
+let stats = fs.statSync(targetPath)
+if (stats.isFile()) {
+  replaceClassesInFile(targetPath, classMap)
+} else if (stats.isDirectory()) {
+  replaceClassesInFolder(targetPath, classMap)
+}