Disguise Cloud UI

This package provides a set of UI components for building web applications using Disguise Cloud.

Installation

npm i @disguise/cloud

Example

To use any components, simply use Primevue component the D prefix. For example, to use a button and a text input field, you would do the following:

<template>
  <DButton label="Click Me" />
  <DInputText v-model="text" placeholder="Type here..." />
</template>

<script setup>
import { ref } from "vue";
// Import Disguise UI components (prefixed with D)
import { DButton, DInputText } from "@disguise/cloud/ui";

const text = ref("");
</script>

Import this css before any tailwind imports

@import "@disguise/cloud/cloud.css";

These CSS variables define the primary color palette and surface shades used by Disguise Cloud UI components, as well as the default border radius. Put this in your style.css file or any global CSS file that is loaded before your components. This css variables can be found in https://volt.primevue.org/nuxt/

/*Color palets used by Disguise UI components */
:root {
  --p-primary-50: #fff3fe;
  --p-primary-100: #ffe7fd;
  --p-primary-200: #ffcefc;
  --p-primary-300: #ffa7f6;
  --p-primary-400: #ff6df0;
  --p-primary-500: #f73ee3;
  --p-primary-600: #db1ec3;
  --p-primary-700: #b6159e;
  --p-primary-800: #951380;
  --p-primary-900: #791667;
  --p-primary-950: #510142;
  --p-surface-0: #ffffff;
  --p-surface-50: #f8fafc;
  --p-surface-100: #f1f5f9;
  --p-surface-200: #e2e8f0;
  --p-surface-300: #cbd5e1;
  --p-surface-400: #94a3b8;
  --p-surface-500: #64748b;
  --p-surface-600: #475569;
  --p-surface-700: #334155;
  --p-surface-800: #1e293b;
  --p-surface-900: #0f172a;
  --p-surface-950: #020617;
  --p-content-border-radius: 6px;
}

/* Light */
:root {
  --p-primary-color: var(--p-primary-500);
  --p-primary-contrast-color: var(--p-surface-0);
  --p-primary-hover-color: var(--p-primary-600);
  --p-primary-active-color: var(--p-primary-700);
  --p-content-border-color: var(--p-surface-200);
  --p-content-hover-background: var(--p-surface-100);
  --p-content-hover-color: var(--p-surface-800);
  --p-highlight-background: var(--p-primary-50);
  --p-highlight-color: var(--p-primary-700);
  --p-highlight-focus-background: var(--p-primary-100);
  --p-highlight-focus-color: var(--p-primary-800);
  --p-text-color: var(--p-surface-700);
  --p-text-hover-color: var(--p-surface-800);
  --p-text-muted-color: var(--p-surface-500);
  --p-text-hover-muted-color: var(--p-surface-600);
}

/*
 * Dark Mode
 * Defaults to system, change the dark variant selector to match the CSS variable configuration.
 * For example;
 * @custom-variant dark (&:where(.app-dark, .app-dark *));
 * should match to;
 * :root[class="app-dark"]
*/
@media (prefers-color-scheme: dark) {
  :root {
    --p-primary-color: var(--p-primary-400);
    --p-primary-contrast-color: var(--p-surface-900);
    --p-primary-hover-color: var(--p-primary-300);
    --p-primary-active-color: var(--p-primary-200);
    --p-content-border-color: var(--p-surface-700);
    --p-content-hover-background: var(--p-surface-800);
    --p-content-hover-color: var(--p-surface-0);
    --p-highlight-background: color-mix(
      in srgb,
      var(--p-primary-400),
      transparent 84%
    );
    --p-highlight-color: rgba(255, 255, 255, 0.87);
    --p-highlight-focus-background: color-mix(
      in srgb,
      var(--p-primary-400),
      transparent 76%
    );
    --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
    --p-text-color: var(--p-surface-0);
    --p-text-hover-color: var(--p-surface-0);
    --p-text-muted-color: var(--p-surface-400);
    --p-text-hover-muted-color: var(--p-surface-300);
  }
}