unocss.config.ts

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss';

const colorReg = (prefix: string) => new RegExp('^' + prefix + '-([0-9a-z]+)(/(\\d+))?$');

const colorAttr = (prefix: string, [, color, , opacity]: RegExpMatchArray) => {
  let lightColor = '',
    darkColor = '';

  if (['black', 'white'].includes(color)) {
    lightColor = color;
    darkColor = color === 'white' ? 'black' : 'white';
  } else {
    lightColor = `gray-${color}`;
    darkColor = `gray-${(
      (+color === 900 || +color === 50 ? 950 : 900) - +color
    ).toString()}`;
  }

  const attr = `${prefix}-${lightColor}${opacity ? '/' + opacity : ''}`;
  const darkAttr = `${prefix}-${darkColor}${opacity ? '/' + opacity : ''}`;

  return `${attr} dark:${darkAttr}`;
};

export default defineConfig({
  shortcuts: [
    ['flex-center', 'flex items-center justify-center'],
    ['hstack', 'flex items-center'],
    ['vstack', 'flex justify-center'],
    ['no-outline', 'outline-none focus:outline-none'],
    [colorReg('c-text'), (v) => colorAttr('text', v)],
    [colorReg('c-border'), (v) => colorAttr('border', v)],
    [colorReg('c-bg'), (v) => colorAttr('bg', v)],
    ['shadow-menu', 'shadow-md shadow-black/25 dark:shadow-black/50'],
    ['window-btn', 'w-3 h-3 text-black rounded-full flex-center no-outline'],
    ['menu-border', 'border-gray-500/50'],
    [
      'menu-box',
      'fixed top-8.5 c-text-black c-bg-200/90 border menu-border rounded-lg shadow-menu'
    ],
    [
      'safari-btn',
      'h-6 outline-none focus:outline-none rounded flex-center border c-border-300'
    ],
    ['cc-btn', 'flex-center rounded-full w-8 h-8 text-white bg-blue-500'],
    [
      'cc-btn-active',
      'flex-center rounded-full w-8 h-8 c-text-700 bg-gray-400/25 dark:bg-gray-300/25'
    ],
    ['cc-text', 'text-xs c-text-500'],
    ['cc-grid', 'c-bg-200/80 rounded-xl cc-grid-shadow backdrop-blur-2xl'],
    ['battery-level', 'absolute rounded-[1px] h-2 top-1/2 -mt-1 ml-0.5 left-0']
  ],
  rules: [['cc-grid-shadow', { 'box-shadow': '0px 1px 5px 0px rgba(0, 0, 0, 0.3)' }]],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      warn: true,
      extraProperties: {
        display: 'inline-block'
      }
    })
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()]
});