daisy-ui-kit 2.1.1 → 2.1.2

package/components/theme/Provider.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { colorVars, hexToHSL, utilVars } from './theme-utils'
-
-const props: Record<string, any> = defineProps({
-  config: { type: Object, default: () => ({}) },
-})
-const el: any = ref(null)
-const colorJsVars = colorVars.map(c => c.jsVar)
-
-/**
- * Watch for changes in the theme and set the css variables directly on the ThemePreview's main element.
- */
-onMounted(() => {
-  watch(
-    () => props.config,
-    (config) => {
-      colorVars.forEach(({ jsVar, cssVar }) => {
-        if (config?.[jsVar]) {
-          const value = hexToHSL(config[jsVar])
-          el.value.style.setProperty(cssVar, value)
-        }
-        else {
-          el.value.style.removeProperty(cssVar)
-        }
-      })
-      utilVars.forEach(({ jsVar, cssVar }) => {
-        if (config?.[jsVar])
-          el.value.style.setProperty(cssVar, config[jsVar])
-
-        else
-          el.value.style.removeProperty(cssVar)
-      })
-    },
-    { immediate: true, deep: true },
-  )
-})
-</script>
-
-<template>
-  <div ref="el" class="theme-provider">
-    <slot />
-  </div>
-</template>

package/components/theme/Snooper.vue

@@ -1,41 +0,0 @@
-
-<script setup lang="ts">
-/**
- * ThemeSnooper uses the theme name to read the theme's CSS variables from the DOM.
- */
-import { colorVars, hslStringToHex, utilVars } from './theme-utils'
-
-const props = defineProps({
-  name: { type: String },
-  isDefault: { type: Boolean },
-  config: { type: Object },
-})
-const emit = defineEmits(['snoop'])
-
-const el: any = ref(null)
-
-onMounted(() => {
-  watch(
-    () => props.name,
-    (name) => {
-      if (props.isDefault && !props.config?.primary) {
-        setTimeout(() => {
-          const config = colorVars.concat(utilVars as any).reduce((config: any, current) => {
-            const style = getComputedStyle(el.value).getPropertyValue(current.cssVar).trim()
-            config[current.jsVar] = current.className ? hslStringToHex(style) : style
-            return config
-          }, {})
-          emit('snoop', { name, isDefault: props.isDefault, config })
-        }, 100)
-      }
-    },
-    { immediate: true },
-  )
-})
-</script>
-
-<template>
-  <div :data-theme="name" class="theme-snooper">
-    <div ref="el" />
-  </div>
-</template>

package/components/theme/Swatch.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-const $props = defineProps({
-  title: { type: String, required: true, default: '' },
-  color: { type: String, required: true, default: '' },
-})
-const emit = defineEmits(['update:color'])
-
-const swatchColor = computed({
-  get: () => $props.color,
-  set: val => emit('update:color', val),
-})
-</script>
-<template>
-  <div class="swatch">
-    <label :for="`colorinput-${title}`" class="swatch-body" :class="title">
-      <div class="title-pill">.{{ title }}</div>
-      <div class="text-input-wrapper">
-        <input v-model="swatchColor" type="text" autocomplete="off" class="text-input" :class="title">
-      </div>
-    </label>
-    <input :id="`colorinput-${title}`" v-model="swatchColor" type="color" class="color-input">
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.swatch {
-  @apply relative col-start-1 row-start-1 overflow-hidden;
-  @apply hover:shadow-lg hover:scale-105 transition-all transform shadow hover:rounded-xl hover:-translate-y-0.5;
-}
-.swatch-body {
-  @apply flex flex-col items-start justify-end w-full h-24  cursor-pointer p-2;
-}
-.text-input-wrapper {
-  @apply text-sm text-white bg-black rounded-b rounded-tr bg-opacity-30 p-1;
-}
-.text-input {
-  @apply font-mono rounded outline-none bg-opacity-0 transition-colors duration-300 px-1 py-0.5;
-  @apply hover:bg-base-100 hover:bg-opacity-30;
-  @apply focus:bg-base-100 focus:bg-opacity-30;
-}
-.color-input {
-  @apply absolute top-16 left-4 opacity-0;
-}
-.title-pill {
-  @apply px-1 text-xs text-white bg-black rounded-t bg-opacity-30;
-}
-</style>

package/components/theme/custom-themes.ts

@@ -1,34 +0,0 @@
-export const rovitDark = {
-  primary: '#793ef9',
-  primaryFocus: '#570df8',
-  primaryContent: '#ffffff',
-  secondary: '#f000b8',
-  secondaryFocus: '#bd0091',
-  secondaryContent: '#ffffff',
-  accent: '#37cdbe',
-  accentFocus: '#2aa79b',
-  accentContent: '#ffffff',
-  neutral: '#2a2e37',
-  neutralFocus: '#16181d',
-  neutralContent: '#ffffff',
-  base100: '#3d4451',
-  base200: '#2a2e37',
-  base300: '#16181d',
-  baseContent: '#ebecf0',
-  info: '#66c6ff',
-  success: '#87d039',
-  warning: '#e2d562',
-  error: '#ff6f6f',
-  borderColor: 'var(--b3)',
-  roundedBox: '1rem',
-  roundedBtn: '0.5rem',
-  roundedBadge: '1.9rem',
-  animationBtn: '0.25s',
-  animationInput: '.2s',
-  btnTextCase: 'uppercase',
-  btnFocusScale: '0.95',
-  navbarPadding: '.5rem',
-  borderBtn: '1px',
-  tabBorder: '1px',
-  tabRadius: '0.5rem',
-}

package/components/theme/theme-utils.ts

@@ -1,175 +0,0 @@
-/* eslint-disable eqeqeq */
-
-export function hexToHSL(H: string) {
-  // Convert hex to RGB first
-  let r: any = 0
-  let g: any = 0
-  let b: any = 0
-  if (H.length == 4) {
-    r = `0x${H[1]}${H[1]}`
-    g = `0x${H[2]}${H[2]}`
-    b = `0x${H[3]}${H[3]}`
-  }
-  else if (H.length == 7) {
-    r = `0x${H[1]}${H[2]}`
-    g = `0x${H[3]}${H[4]}`
-    b = `0x${H[5]}${H[6]}`
-  }
-  // Then to HSL
-  r /= 255
-  g /= 255
-  b /= 255
-  const cmin = Math.min(r, g, b)
-  const cmax = Math.max(r, g, b)
-  const delta = cmax - cmin
-  let h = 0
-  let s = 0
-  let l = 0
-
-  if (delta == 0)
-    h = 0
-  else if (cmax == r)
-    h = ((g - b) / delta) % 6
-  else if (cmax == g)
-    h = (b - r) / delta + 2
-  else h = (r - g) / delta + 4
-
-  h = Math.round(h * 60)
-
-  if (h < 0)
-    h += 360
-
-  l = (cmax + cmin) / 2
-  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
-  s = +(s * 100).toFixed(1)
-  l = +(l * 100).toFixed(1)
-
-  return `${h} ${s}% ${l}%`
-}
-
-export interface ThemeConfig {
-  primary?: string
-  primaryFocus?: string
-  primaryContent?: string
-  secondary?: string
-  secondaryFocus?: string
-  secondaryContent?: string
-  accent?: string
-  accentFocus?: string
-  accentContent?: string
-  neutral?: string
-  neutralFocus?: string
-  neutralContent?: string
-  base100?: string
-  base200?: string
-  base300?: string
-  baseContent?: string
-  info?: string
-  success?: string
-  warning?: string
-  error?: string
-  borderColor?: string
-  roundedBox?: string
-  roundedBtn?: string
-  roundedBadge?: string
-  animationBtn?: string
-  animationInput?: string
-  btnTextCase?: string
-  btnFocusScale?: string
-  navbarPadding?: string
-  borderBtn?: string
-  tabBorder?: string
-  tabRadius?: string
-}
-export interface Theme {
-  name: string
-  isDefault: boolean
-  config: ThemeConfig
-}
-
-export const defaultThemes: Theme[] = [
-  { name: 'light', isDefault: true, config: {} },
-  { name: 'dark', isDefault: true, config: {} },
-  { name: 'cupcake', isDefault: true, config: {} },
-  { name: 'bumblebee', isDefault: true, config: {} },
-  { name: 'emerald', isDefault: true, config: {} },
-  { name: 'corporate', isDefault: true, config: {} },
-  { name: 'synthwave', isDefault: true, config: {} },
-  { name: 'retro', isDefault: true, config: {} },
-  { name: 'cyberpunk', isDefault: true, config: {} },
-  { name: 'valentine', isDefault: true, config: {} },
-  { name: 'halloween', isDefault: true, config: {} },
-  { name: 'garden', isDefault: true, config: {} },
-  { name: 'forest', isDefault: true, config: {} },
-  { name: 'aqua', isDefault: true, config: {} },
-  { name: 'lofi', isDefault: true, config: {} },
-  { name: 'pastel', isDefault: true, config: {} },
-  { name: 'fantasy', isDefault: true, config: {} },
-  { name: 'wireframe', isDefault: true, config: {} },
-  { name: 'black', isDefault: true, config: {} },
-  { name: 'luxury', isDefault: true, config: {} },
-  { name: 'dracula', isDefault: true, config: {} },
-  { name: 'cmyk', isDefault: true, config: {} },
-  { name: 'autumn', isDefault: true, config: {} },
-  { name: 'business', isDefault: true, config: {} },
-  { name: 'acid', isDefault: true, config: {} },
-  { name: 'lemonade', isDefault: true, config: {} },
-  { name: 'night', isDefault: true, config: {} },
-  { name: 'coffee', isDefault: true, config: {} },
-  { name: 'winter', isDefault: true, config: {} },
-]
-
-export function hslToHex([h, s, l]: number[]) {
-  l /= 100
-  const a = (s * Math.min(l, 1 - l)) / 100
-  const f = (n: number) => {
-    const k = (n + h / 30) % 12
-    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
-    return Math.round(255 * color)
-      .toString(16)
-      .padStart(2, '0') // convert to Hex and prefix "0" if needed
-  }
-  return `#${f(0)}${f(8)}${f(4)}`
-}
-
-export function hslStringToHex(hslString: string) {
-  const args: number[] = hslString.split(' ').map((val: string) => parseInt(val.replace('%', '')))
-  return hslToHex(args)
-}
-
-export const colorVars = [
-  { className: 'primary', jsVar: 'primary', cssVar: '--p' },
-  { className: 'primary-focus', jsVar: 'primaryFocus', cssVar: '--pf' },
-  { className: 'primary-content', jsVar: 'primaryContent', cssVar: '--pc' },
-  { className: 'secondary', jsVar: 'secondary', cssVar: '--s' },
-  { className: 'secondary-focus', jsVar: 'secondaryFocus', cssVar: '--sf' },
-  { className: 'secondary-content', jsVar: 'secondaryContent', cssVar: '--sc' },
-  { className: 'accent', jsVar: 'accent', cssVar: '--a' },
-  { className: 'accent-focus', jsVar: 'accentFocus', cssVar: '--af' },
-  { className: 'accent-content', jsVar: 'accentContent', cssVar: '--ac' },
-  { className: 'neutral', jsVar: 'neutral', cssVar: '--n' },
-  { className: 'neutral-focus', jsVar: 'neutralFocus', cssVar: '--nf' },
-  { className: 'neutral-content', jsVar: 'neutralContent', cssVar: '--nc' },
-  { className: 'base-100', jsVar: 'base100', cssVar: '--b1' },
-  { className: 'base-200', jsVar: 'base200', cssVar: '--b2' },
-  { className: 'base-300', jsVar: 'base300', cssVar: '--b3' },
-  { className: 'base-content', jsVar: 'baseContent', cssVar: '--bc' },
-  { className: 'info', jsVar: 'info', cssVar: '--in' },
-  { className: 'success', jsVar: 'success', cssVar: '--su' },
-  { className: 'warning', jsVar: 'warning', cssVar: '--wa' },
-  { className: 'error', jsVar: 'error', cssVar: '--er' },
-]
-export const utilVars = [
-  { jsVar: 'borderColor', cssVar: '--border-color' },
-  { jsVar: 'roundedBox', cssVar: '--rounded-box' },
-  { jsVar: 'roundedBtn', cssVar: '--rounded-btn' },
-  { jsVar: 'roundedBadge', cssVar: '--rounded-badge' },
-  { jsVar: 'animationBtn', cssVar: '--animation-btn' },
-  { jsVar: 'animationInput', cssVar: '--animation-input' },
-  { jsVar: 'btnTextCase', cssVar: '--btn-text-case' },
-  { jsVar: 'btnFocusScale', cssVar: '--btn-focus-scale' },
-  { jsVar: 'navbarPadding', cssVar: '--navbar-padding' },
-  { jsVar: 'borderBtn', cssVar: '--border-btn' },
-  { jsVar: 'tabBorder', cssVar: '--tab-border' },
-  { jsVar: 'tabRadius', cssVar: '--tab-radius' },
-]