@vobs/ui 0.1.0

package/dist/styles.css

@@ -0,0 +1,3 @@
+@import './tokens.css';
+@import './base.css';
+@import './components.css';

package/dist/theme-data.d.ts

@@ -0,0 +1,363 @@
+/** @license MIT
+ * Copyright (c) 2026 vobsjs
+ * @vobs/ui
+ */
+export declare const DEFAULT_THEME: "dark";
+export declare const DEFAULT_BRAND_ID: "green";
+export declare const DEFAULT_BRAND_COLOR: "#32F08C";
+export type ThemeName = 'dark' | 'light';
+export interface BrandColor {
+    readonly id: string;
+    readonly label: string;
+    readonly color: string;
+}
+export interface BrandColorInput {
+    readonly id?: string;
+    readonly label?: string;
+    readonly color: string;
+}
+export type BrandInput = string | BrandColorInput;
+export declare const brandPresets: readonly [{
+    readonly id: "green";
+    readonly label: "Nimbus Green";
+    readonly color: "#32F08C";
+}, {
+    readonly id: "blue";
+    readonly label: "Nimbus Blue";
+    readonly color: "#80C1FF";
+}, {
+    readonly id: "purple";
+    readonly label: "Nimbus Purple";
+    readonly color: "#8E80FF";
+}, {
+    readonly id: "yellow";
+    readonly label: "Nimbus Yellow";
+    readonly color: "#FFD080";
+}, {
+    readonly id: "red";
+    readonly label: "Nimbus Red";
+    readonly color: "#FF8080";
+}, {
+    readonly id: "teal";
+    readonly label: "Nimbus Teal";
+    readonly color: "#2DD288";
+}, {
+    readonly id: "cyan";
+    readonly label: "Nimbus Cyan";
+    readonly color: "#04CBE5";
+}, {
+    readonly id: "violet";
+    readonly label: "Nimbus Violet";
+    readonly color: "#BFA5FF";
+}, {
+    readonly id: "slate";
+    readonly label: "Nimbus Slate";
+    readonly color: "#AFB9CF";
+}, {
+    readonly id: "neutral";
+    readonly label: "Nimbus Neutral";
+    readonly color: "#BABABA";
+}];
+export declare const primitiveTokenValues: {
+    readonly '--radius-2': "2px";
+    readonly '--radius-4': "4px";
+    readonly '--radius-6': "6px";
+    readonly '--radius-8': "8px";
+    readonly '--radius-10': "10px";
+    readonly '--radius-full': "9999px";
+    readonly '--spacer-0': "0px";
+    readonly '--spacer-4': "4px";
+    readonly '--spacer-6': "6px";
+    readonly '--spacer-8': "8px";
+    readonly '--spacer-12': "12px";
+    readonly '--spacer-16': "16px";
+    readonly '--spacer-24': "24px";
+    readonly '--spacer-32': "32px";
+    readonly '--spacer-40': "40px";
+    readonly '--k-icon-xs': "14px";
+    readonly '--k-icon-sm': "16px";
+    readonly '--k-icon-md': "20px";
+    readonly '--k-icon-lg': "24px";
+    readonly '--font-family-default': "SF Pro Text";
+    readonly '--font-family-heading': "SF Pro";
+    readonly '--font-family-mono': "JetBrains Mono";
+    readonly '--font-family-base': "var(--font-family-default)";
+    readonly '--font-family-heading-alias': "var(--font-family-heading)";
+    readonly '--font-family-mono-alias': "var(--font-family-mono)";
+    readonly '--body-xs-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--body-xs-font-size': "10px";
+    readonly '--body-xs-font-weight': "400";
+    readonly '--body-xs-line-height': "14px";
+    readonly '--body-sm-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--body-sm-font-size': "11px";
+    readonly '--body-sm-font-weight': "400";
+    readonly '--body-sm-line-height': "16px";
+    readonly '--body-sm-strong-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--body-sm-strong-font-size': "11px";
+    readonly '--body-sm-strong-font-weight': "500";
+    readonly '--body-sm-strong-line-height': "16px";
+    readonly '--body-md-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--body-md-font-size': "12px";
+    readonly '--body-md-font-weight': "400";
+    readonly '--body-md-line-height': "18px";
+    readonly '--body-md-strong-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--body-md-strong-font-size': "12px";
+    readonly '--body-md-strong-font-weight': "500";
+    readonly '--body-md-strong-line-height': "18px";
+    readonly '--body-base-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--body-base-font-size': "13px";
+    readonly '--body-base-font-weight': "400";
+    readonly '--body-base-line-height': "20px";
+    readonly '--body-base-strong-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--body-base-strong-font-size': "13px";
+    readonly '--body-base-strong-font-weight': "500";
+    readonly '--body-base-strong-line-height': "20px";
+    readonly '--heading-3xs-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--heading-3xs-font-size': "11px";
+    readonly '--heading-3xs-font-weight': "600";
+    readonly '--heading-3xs-line-height': "16px";
+    readonly '--heading-2xs-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--heading-2xs-font-size': "12px";
+    readonly '--heading-2xs-font-weight': "600";
+    readonly '--heading-2xs-line-height': "18px";
+    readonly '--heading-xs-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--heading-xs-font-size': "13px";
+    readonly '--heading-xs-font-weight': "600";
+    readonly '--heading-xs-line-height': "20px";
+    readonly '--heading-sm-font-family': "\"SF Pro Text\", system-ui, -apple-system, sans-serif";
+    readonly '--heading-sm-font-size': "16px";
+    readonly '--heading-sm-font-weight': "600";
+    readonly '--heading-sm-line-height': "24px";
+    readonly '--heading-md-font-family': "\"SF Pro\", system-ui, -apple-system, sans-serif";
+    readonly '--heading-md-font-size': "20px";
+    readonly '--heading-md-font-weight': "600";
+    readonly '--heading-md-line-height': "28px";
+    readonly '--heading-lg-font-family': "\"SF Pro\", system-ui, -apple-system, sans-serif";
+    readonly '--heading-lg-font-size': "22px";
+    readonly '--heading-lg-font-weight': "600";
+    readonly '--heading-lg-line-height': "30px";
+    readonly '--heading-xl-font-family': "\"SF Pro\", system-ui, -apple-system, sans-serif";
+    readonly '--heading-xl-font-size': "24px";
+    readonly '--heading-xl-font-weight': "600";
+    readonly '--heading-xl-line-height': "32px";
+    readonly '--heading-2xl-font-family': "\"SF Pro\", system-ui, -apple-system, sans-serif";
+    readonly '--heading-2xl-font-size': "28px";
+    readonly '--heading-2xl-font-weight': "600";
+    readonly '--heading-2xl-line-height': "36px";
+    readonly '--heading-3xl-font-family': "\"SF Pro\", system-ui, -apple-system, sans-serif";
+    readonly '--heading-3xl-font-size': "32px";
+    readonly '--heading-3xl-font-weight': "600";
+    readonly '--heading-3xl-line-height': "40px";
+    readonly '--code-editor-font-family': "\"JetBrains Mono\", system-ui, -apple-system, sans-serif";
+    readonly '--code-editor-font-size': "13px";
+    readonly '--code-editor-font-weight': "450";
+    readonly '--code-editor-line-height': "20px";
+    readonly '--code-terminal-font-family': "\"JetBrains Mono\", system-ui, -apple-system, sans-serif";
+    readonly '--code-terminal-font-size': "12px";
+    readonly '--code-terminal-font-weight': "450";
+    readonly '--code-terminal-line-height': "18px";
+    readonly '--font-weight-default': "400";
+    readonly '--font-weight-code': "450";
+    readonly '--font-weight-medium': "500";
+    readonly '--font-weight-strong': "600";
+    readonly '--z-index-dropdown': "2000";
+    readonly '--z-index-drawer': "2500";
+    readonly '--z-index-modal': "3000";
+    readonly '--z-index-notification': "3500";
+    readonly '--z-index-tooltip': "4000";
+    readonly '--transition-fast': "0.12s ease";
+    readonly '--transition-normal': "0.2s ease";
+    readonly '--transition-slow': "0.3s ease";
+    readonly '--breakpoint-sm': "576px";
+    readonly '--breakpoint-md': "768px";
+    readonly '--breakpoint-lg': "1024px";
+    readonly '--breakpoint-xl': "1280px";
+};
+export declare const themeTokenValues: {
+    readonly dark: {
+        readonly '--color-background': "var(--bg-base-default)";
+        readonly '--color-surface': "var(--bg-base-secondary)";
+        readonly '--color-surface-variant': "var(--bg-base-tertiary)";
+        readonly '--color-overlay-1': "var(--bg-overlay-l1)";
+        readonly '--color-overlay-2': "var(--bg-overlay-l2)";
+        readonly '--color-overlay-3': "var(--bg-overlay-l3)";
+        readonly '--color-overlay-4': "var(--bg-overlay-l4)";
+        readonly '--color-card': "var(--bg-base-secondary)";
+        readonly '--color-tooltip': "var(--bg-tooltip)";
+        readonly '--color-menu': "var(--bg-menu)";
+        readonly '--color-foreground': "var(--text-default)";
+        readonly '--color-foreground-hover': "var(--text-default-hover)";
+        readonly '--color-on-surface': "var(--text-default)";
+        readonly '--color-on-surface-variant': "var(--text-secondary)";
+        readonly '--color-muted-foreground': "var(--text-secondary)";
+        readonly '--color-disabled-foreground': "var(--text-disabled)";
+        readonly '--color-border': "var(--border-neutral-l1)";
+        readonly '--color-border-strong': "var(--border-neutral-l2)";
+        readonly '--color-border-stronger': "var(--border-neutral-l3)";
+        readonly '--color-border-contrast': "var(--border-contrast)";
+        readonly '--color-outline': "var(--border-neutral-l1)";
+        readonly '--color-primary': "var(--bg-brand)";
+        readonly '--color-primary-hover': "var(--bg-brand-hover)";
+        readonly '--color-primary-disabled': "var(--bg-brand-disabled)";
+        readonly '--color-primary-soft': "var(--bg-brand-popup)";
+        readonly '--color-accent': "var(--bg-brand)";
+        readonly '--color-on-primary': "var(--text-onbrand)";
+        readonly '--color-info': "var(--status-primary-default)";
+        readonly '--color-success': "var(--status-success-default)";
+        readonly '--color-warning': "var(--status-warning-default)";
+        readonly '--color-error': "var(--status-error-default)";
+        readonly '--color-error-soft': "var(--status-error-surface-l1)";
+        readonly '--bg-base-default': "#1A1B1D";
+        readonly '--bg-base-secondary': "#222427";
+        readonly '--bg-base-tertiary': "#2A2D31";
+        readonly '--bg-tooltip': "#1A1B1D";
+        readonly '--bg-menu': "#202123";
+        readonly '--bg-invert': "#DADDE5";
+        readonly '--bg-invert-hover': "#EDEFF2";
+        readonly '--bg-invert-active': "#979AA4";
+        readonly '--bg-invert-disabled': "rgba(224, 226, 242, 0.12)";
+        readonly '--bg-overlay-l1': "rgba(224, 226, 242, 0.04)";
+        readonly '--bg-overlay-l2': "rgba(224, 226, 242, 0.06)";
+        readonly '--bg-overlay-l3': "rgba(224, 226, 242, 0.08)";
+        readonly '--bg-overlay-l4': "rgba(224, 226, 242, 0.12)";
+        readonly '--text-default': "#D1D3DB";
+        readonly '--text-default-hover': "#F5F9FE";
+        readonly '--text-default-active': "#F5F9FE";
+        readonly '--text-secondary': "#9599A6";
+        readonly '--text-secondary-hover': "#D1D3DB";
+        readonly '--text-secondary-active': "#D1D3DB";
+        readonly '--text-tertiary': "#666B75";
+        readonly '--text-disabled': "#666B75";
+        readonly '--text-onbrand': "#0C0C0D";
+        readonly '--text-onaccent': "#0C0C0D";
+        readonly '--icon-default': "#D1D3DB";
+        readonly '--icon-default-hover': "#F5F9FE";
+        readonly '--icon-default-active': "#F5F9FE";
+        readonly '--icon-secondary': "#9599A6";
+        readonly '--icon-secondary-hover': "#D1D3DB";
+        readonly '--icon-secondary-active': "#D1D3DB";
+        readonly '--icon-tertiary': "#666B75";
+        readonly '--icon-disabled': "#666B75";
+        readonly '--icon-onbrand': "#0C0C0D";
+        readonly '--icon-onaccent': "#0C0C0D";
+        readonly '--border-neutral-l1': "rgba(224, 226, 242, 0.1)";
+        readonly '--border-neutral-l2': "rgba(224, 226, 242, 0.16)";
+        readonly '--border-neutral-l3': "rgba(224, 226, 242, 0.2)";
+        readonly '--border-contrast': "#FFFFFF";
+        readonly '--status-primary-default': "#387BFF";
+        readonly '--status-primary-hover': "#4C88FF";
+        readonly '--status-primary-active': "#1759DD";
+        readonly '--status-primary-surface-l1': "rgba(53, 121, 255, 0.18)";
+        readonly '--status-primary-surface-l2': "rgba(53, 121, 255, 0.28)";
+        readonly '--status-primary-surface-l3': "rgba(53, 121, 255, 0.36)";
+        readonly '--status-info-default': "var(--status-primary-default)";
+        readonly '--status-info-surface-l1': "var(--status-primary-surface-l1)";
+        readonly '--status-success-default': "#33C192";
+        readonly '--status-success-hover': "#5ED4AD";
+        readonly '--status-success-active': "#27B082";
+        readonly '--status-success-surface-l1': "rgba(0, 165, 110, 0.18)";
+        readonly '--status-success-surface-l2': "rgba(0, 165, 110, 0.28)";
+        readonly '--status-success-surface-l3': "rgba(0, 165, 110, 0.36)";
+        readonly '--status-alert-default': "#D29D00";
+        readonly '--status-alert-hover': "#DFB949";
+        readonly '--status-alert-active': "#AB8820";
+        readonly '--status-alert-surface-l1': "rgba(210, 157, 0, 0.16)";
+        readonly '--status-alert-surface-l2': "rgba(210, 157, 0, 0.28)";
+        readonly '--status-alert-surface-l3': "rgba(210, 157, 0, 0.36)";
+        readonly '--status-warning-default': "#D27E24";
+        readonly '--status-warning-hover': "#D78B28";
+        readonly '--status-warning-active': "#B46510";
+        readonly '--status-warning-surface-l1': "rgba(210, 126, 36, 0.16)";
+        readonly '--status-warning-surface-l2': "rgba(210, 126, 36, 0.28)";
+        readonly '--status-warning-surface-l3': "rgba(210, 126, 36, 0.36)";
+        readonly '--status-error-default': "#F65A5A";
+        readonly '--status-error-hover': "#F86262";
+        readonly '--status-error-active': "#B33636";
+        readonly '--status-error-surface-l1': "rgba(246, 70, 70, 0.18)";
+        readonly '--status-error-surface-l2': "rgba(246, 70, 70, 0.28)";
+        readonly '--status-error-surface-l3': "rgba(246, 70, 70, 0.36)";
+        readonly '--code-text': "#E0E3EE";
+        readonly '--code-doc': "#7F838C";
+        readonly '--code-link': "#3C7EFF";
+        readonly '--code-number': "#F48CCA";
+        readonly '--code-action': "#B38CFF";
+        readonly '--code-instruction': "#F0D8FF";
+        readonly '--code-function': "#F29D79";
+        readonly '--code-constant': "#80BBFF";
+        readonly '--code-parameter': "#82D99F";
+        readonly '--code-attribute': "#DED47E";
+        readonly '--code-tag': "#F2858C";
+    };
+    readonly light: {
+        readonly '--color-background': "var(--bg-base-default)";
+        readonly '--color-surface': "var(--bg-base-secondary)";
+        readonly '--color-surface-variant': "var(--bg-base-tertiary)";
+        readonly '--color-overlay-1': "var(--bg-overlay-l1)";
+        readonly '--color-overlay-2': "var(--bg-overlay-l2)";
+        readonly '--color-overlay-3': "var(--bg-overlay-l3)";
+        readonly '--color-overlay-4': "var(--bg-overlay-l4)";
+        readonly '--color-card': "var(--bg-base-secondary)";
+        readonly '--color-tooltip': "var(--bg-tooltip)";
+        readonly '--color-menu': "var(--bg-menu)";
+        readonly '--color-foreground': "var(--text-default)";
+        readonly '--color-foreground-hover': "var(--text-default-hover)";
+        readonly '--color-on-surface': "var(--text-default)";
+        readonly '--color-on-surface-variant': "var(--text-secondary)";
+        readonly '--color-muted-foreground': "var(--text-secondary)";
+        readonly '--color-disabled-foreground': "var(--text-disabled)";
+        readonly '--color-border': "var(--border-neutral-l1)";
+        readonly '--color-border-strong': "var(--border-neutral-l2)";
+        readonly '--color-border-stronger': "var(--border-neutral-l3)";
+        readonly '--color-border-contrast': "var(--border-contrast)";
+        readonly '--color-outline': "var(--border-neutral-l1)";
+        readonly '--color-primary': "var(--bg-brand)";
+        readonly '--color-primary-hover': "var(--bg-brand-hover)";
+        readonly '--color-primary-disabled': "var(--bg-brand-disabled)";
+        readonly '--color-primary-soft': "var(--bg-brand-popup)";
+        readonly '--color-accent': "var(--bg-brand)";
+        readonly '--color-on-primary': "var(--text-onbrand)";
+        readonly '--color-info': "var(--status-primary-default)";
+        readonly '--color-success': "var(--status-success-default)";
+        readonly '--color-warning': "var(--status-warning-default)";
+        readonly '--color-error': "var(--status-error-default)";
+        readonly '--color-error-soft': "var(--status-error-surface-l1)";
+        readonly '--bg-base-default': "#FFFFFF";
+        readonly '--bg-base-secondary': "#F5F6F8";
+        readonly '--bg-base-tertiary': "#EDF0F5";
+        readonly '--bg-overlay-l1': "rgba(0, 0, 0, 0.04)";
+        readonly '--bg-overlay-l2': "rgba(0, 0, 0, 0.06)";
+        readonly '--bg-overlay-l3': "rgba(0, 0, 0, 0.08)";
+        readonly '--bg-overlay-l4': "rgba(0, 0, 0, 0.12)";
+        readonly '--text-default': "#0F1117";
+        readonly '--text-secondary': "#4B5563";
+        readonly '--text-tertiary': "#5B6370";
+        readonly '--text-disabled': "#525A68";
+        readonly '--text-onbrand': "#FFFFFF";
+        readonly '--icon-default': "#0F1117";
+        readonly '--icon-secondary': "#4B5563";
+        readonly '--icon-tertiary': "#5B6370";
+        readonly '--icon-disabled': "#525A68";
+        readonly '--border-neutral-l1': "rgba(0, 0, 0, 0.12)";
+        readonly '--border-neutral-l2': "rgba(0, 0, 0, 0.18)";
+        readonly '--border-neutral-l3': "rgba(0, 0, 0, 0.25)";
+        readonly '--status-success-default': "#16A34A";
+        readonly '--status-warning-default': "#CA8A04";
+        readonly '--status-error-default': "#DC2626";
+        readonly '--status-info-default': "#2E69FF";
+        readonly '--status-success-surface-l1': "rgba(22, 163, 74, 0.08)";
+        readonly '--status-warning-surface-l1': "rgba(202, 138, 4, 0.08)";
+        readonly '--status-error-surface-l1': "rgba(220, 38, 38, 0.08)";
+        readonly '--status-info-surface-l1': "rgba(46, 105, 255, 0.08)";
+    };
+};
+export interface BrandTokens {
+    readonly background: string;
+    readonly hover: string;
+    readonly disabled: string;
+    readonly soft: string;
+    readonly onBrand: string;
+}
+export declare function resolveBrandColor(value?: BrandInput): BrandColor;
+export declare function deriveBrandTokens(color: string): BrandTokens;
+export declare function normalizeHexColor(value: string): string;
+export declare function contrastRatio(left: string, right: string): number;