@saket.s/adkompas-ui

Design tokens, Vuetify theme preset, framework-agnostic CSS, and presentational Vue components used across Adkompas apps.

Install

npm install @saket.s/adkompas-ui

Vue 3 is a required peer dependency. Vuetify 3 is required only if you use the theme preset or Vue components.

npm install vue vuetify          # for Vue + Vuetify consumers

Usage

Vue + Vuetify app

// main.ts
import { createApp } from 'vue'
import { createAdkompasVuetify } from '@saket.s/adkompas-ui/theme'
import '@saket.s/adkompas-ui/styles'        // tokens + reset + utilities
import App from './App.vue'
// component styles are auto-imported when you import any component below

const app = createApp(App)
app.use(createAdkompasVuetify())
app.mount('#app')

<script setup lang="ts">
import { LandingShell, FeaturesList, AppFooter } from '@saket.s/adkompas-ui'

const features = [
  { icon: 'mdi-rocket', title: 'Fast', description: 'Builds in seconds.', isNew: true }
]
</script>

<template>
  <LandingShell>
    <template #auth>
      <v-card>… your sign-in form …</v-card>
    </template>
    <template #features>
      <FeaturesList title="Why us?" :features="features" />
    </template>
    <template #footer>
      <AppFooter copyright-name="Acme" :links="[{ label: 'Privacy', to: '/privacy' }]" />
    </template>
  </LandingShell>
</template>

Framework-agnostic (React, plain HTML, anything)

Just import the CSS — you get the design tokens as CSS custom properties plus the utility classes:

import '@saket.s/adkompas-ui/styles'

Then reference them anywhere:

<div class="ak-hero-gradient" style="color: var(--ak-color-surface)">
  Hello
</div>

Tokens only (no resets / utilities)

import '@saket.s/adkompas-ui/tokens'

Or pull the JS object for use in code:

import { tokens } from '@saket.s/adkompas-ui'
console.log(tokens.color.primary) // '#1976D2'

What's inside

| Export | Contents | |---|---| | @saket.s/adkompas-ui | Vue components + theme factory + tokens object | | @saket.s/adkompas-ui/theme | createAdkompasVuetify() factory + tokens | | @saket.s/adkompas-ui/styles | Tokens + html/body reset + ak-* utility classes | | @saket.s/adkompas-ui/tokens | CSS custom properties only | | @saket.s/adkompas-ui/style.css | Bundled component styles — auto-imported when you import the package, exposed for opt-out / SSR setups |

CSS custom properties

All visual tokens are exposed under --ak-*:

• Colors: --ak-color-primary, --ak-color-secondary, --ak-color-success, --ak-color-error, --ak-color-warning, --ak-color-info, --ak-color-accent
• Surfaces: --ak-color-surface, --ak-color-surface-muted, --ak-color-surface-soft, --ak-color-border-soft
• Code editor: --ak-color-code-bg, --ak-color-code-text, --ak-color-syntax-{key,string,number,boolean,null}
• Gradient: --ak-gradient-hero
• Typography: --ak-font-sans, --ak-font-mono
• Radius: --ak-radius-sm, --ak-radius-md

Components

| Component | Purpose | |---|---| | LandingShell | Two-column auth/features layout with a footer slot | | FeaturesList | Grid of feature cards (icon + title + description + optional NEW chip) | | AppFooter | Site footer with copyright + configurable link list | | JsonPreview | Read-only or editable JSON viewer with syntax highlighting | | ValidationStatus | Tonal alert summarising validity + error list |

Build & publish (maintainer)

npm install
npm run build
npm login
npm publish --access public

The package publishes to npmjs.com. Bump version in package.json between releases.