@rafael_dias/akoma 0.4.0 → 0.7.6

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { cIcons } from '../../node_modules/@sysvale/cuida-icons/dist/index.js';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
@@ -13,6 +14,20 @@ type: "button" | "submit" | "reset";
 block: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
+declare const __VLS_component_10: DefineComponent<__VLS_Props_17, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: string) => any;
+}, string, PublicProps, Readonly<__VLS_Props_17> & Readonly<{
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+trackRef: HTMLDivElement;
+}, HTMLElement>;
+
+declare const __VLS_component_11: DefineComponent<__VLS_Props_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_18> & Readonly<{}>, {
+disabled: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+itemRef: HTMLButtonElement;
+}, HTMLButtonElement>;
+
 declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
 variant: BadgeVariant;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
@@ -33,18 +48,18 @@ padding: "none" | "sm" | "md" | "lg";
 
 declare const __VLS_component_5: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_6: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
+declare const __VLS_component_6: DefineComponent<__VLS_Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_13> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
 declare const __VLS_component_7: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLUListElement>;
 
-declare const __VLS_component_8: DefineComponent<__VLS_Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_13> & Readonly<{}>, {
+declare const __VLS_component_8: DefineComponent<__VLS_Props_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_14> & Readonly<{}>, {
 disabled: boolean;
 interactive: boolean;
 padding: ListRowPadding;
 divider: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_9: DefineComponent<__VLS_Props_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_14> & Readonly<{}>, {
+declare const __VLS_component_9: DefineComponent<__VLS_Props_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_15> & Readonly<{}>, {
 variant: IconButtonVariant;
 size: IconButtonSize;
 disabled: boolean;
@@ -62,6 +77,13 @@ declare type __VLS_Props = {
 };
 
 declare type __VLS_Props_10 = {
+    name: CuidaIconName;
+    size?: number | string;
+    /** Accessible label — omit when decorative inside labelled controls */
+    label?: string;
+};
+
+declare type __VLS_Props_11 = {
     /** Horizontal spacing around the line */
     spacing?: DividerSpacing;
     /** Optional centered label */
@@ -69,7 +91,7 @@ declare type __VLS_Props_10 = {
     vertical?: boolean;
 };
 
-declare type __VLS_Props_11 = {
+declare type __VLS_Props_12 = {
     /** Current value */
     value?: number;
     max?: number;
@@ -80,33 +102,46 @@ declare type __VLS_Props_11 = {
     showValue?: boolean;
 };
 
-declare type __VLS_Props_12 = {
+declare type __VLS_Props_13 = {
     title?: string;
 };
 
-declare type __VLS_Props_13 = {
+declare type __VLS_Props_14 = {
     interactive?: boolean;
     disabled?: boolean;
     padding?: ListRowPadding;
     divider?: boolean;
 };
 
-declare type __VLS_Props_14 = {
+declare type __VLS_Props_15 = {
     variant?: IconButtonVariant;
     size?: IconButtonSize;
     disabled?: boolean;
     loading?: boolean;
     type?: 'button' | 'submit' | 'reset';
     label: string;
+    /** Cuida Icons name — preferred over the default slot */
+    icon?: CuidaIconName;
 };
 
-declare type __VLS_Props_15 = {
+declare type __VLS_Props_16 = {
     modelValue?: boolean;
     label?: string;
     description?: string;
     disabled?: boolean;
 };
 
+declare type __VLS_Props_17 = {
+    modelValue: string;
+};
+
+declare type __VLS_Props_18 = {
+    value: string;
+    label: string;
+    icon?: CuidaIconName;
+    disabled?: boolean;
+};
+
 declare type __VLS_Props_2 = {
     variant?: BadgeVariant;
     label?: string;
@@ -179,6 +214,30 @@ declare function __VLS_template(): {
     rootEl: HTMLButtonElement;
 };
 
+declare function __VLS_template_10(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        trackRef: HTMLDivElement;
+    };
+    rootEl: HTMLElement;
+};
+
+declare function __VLS_template_11(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        icon?: () => unknown;
+    }> & {
+        icon?: () => unknown;
+    };
+    refs: {
+        itemRef: HTMLButtonElement;
+    };
+    rootEl: HTMLButtonElement;
+};
+
 declare function __VLS_template_2(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -283,6 +342,10 @@ declare function __VLS_template_9(): {
 
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
+declare type __VLS_TemplateResult_10 = ReturnType<typeof __VLS_template_10>;
+
+declare type __VLS_TemplateResult_11 = ReturnType<typeof __VLS_template_11>;
+
 declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
 
 declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
@@ -305,6 +368,18 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_10<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_11<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_2<T, S> = T & {
     new (): {
         $slots: S;
@@ -353,6 +428,57 @@ declare type __VLS_WithTemplateSlots_9<T, S> = T & {
     };
 };
 
+export declare type AccentPalette = keyof typeof accentPalettes;
+
+export declare const accentPaletteIds: AccentPalette[];
+
+/**
+ * Named accent palettes for Akoma.
+ * Set on `<html data-accent="teal">` or override CSS variables in your app.
+ */
+export declare const accentPalettes: {
+    readonly violet: {
+        readonly label: "Violet";
+        readonly description: "Mineral violet — default for App mood.";
+        readonly sample: "#6658b8";
+    };
+    readonly evergreen: {
+        readonly label: "Evergreen";
+        readonly description: "Confident green — default for Site mood.";
+        readonly sample: "#2e684f";
+    };
+    readonly teal: {
+        readonly label: "Teal";
+        readonly description: "Calm mineral teal for productivity and wellness apps.";
+        readonly sample: "#3a7d85";
+    };
+    readonly ocean: {
+        readonly label: "Ocean";
+        readonly description: "Trustworthy blue for data-heavy products.";
+        readonly sample: "#3d6a94";
+    };
+    readonly amber: {
+        readonly label: "Amber";
+        readonly description: "Warm gold for optimistic, human interfaces.";
+        readonly sample: "#9a702d";
+    };
+    readonly rose: {
+        readonly label: "Rose";
+        readonly description: "Dusty rose for lifestyle and creative tools.";
+        readonly sample: "#a8586a";
+    };
+    readonly coral: {
+        readonly label: "Coral";
+        readonly description: "Terracotta warmth without feeling playful.";
+        readonly sample: "#b5644a";
+    };
+    readonly slate: {
+        readonly label: "Slate";
+        readonly description: "Blue-gray for neutral B2B surfaces.";
+        readonly sample: "#4a5d73";
+    };
+};
+
 export declare const AkAmbientBg: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
 contained: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -365,13 +491,17 @@ export declare const AkCard: __VLS_WithTemplateSlots_4<typeof __VLS_component_4,
 
 export declare const AkChip: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
-export declare const AkDivider: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
+export declare const AkDivider: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{}>, {
 spacing: DividerSpacing;
 vertical: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 export declare const AkEmptyState: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
+export declare const AkIcon: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
+size: number | string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+
 export declare const AkIconButton: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
 
 export declare const AkInput: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -397,7 +527,7 @@ export declare type AkomaOptions = {
     prefix?: string;
 };
 
-export declare const AkProgress: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{}>, {
+export declare const AkProgress: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{}>, {
 size: ProgressSize;
 value: number;
 max: number;
@@ -412,15 +542,19 @@ height: string;
 radius: "sm" | "md" | "lg" | "full" | string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const AkSwitch: DefineComponent<__VLS_Props_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+export declare const AkSwitch: DefineComponent<__VLS_Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_15> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_16> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 disabled: boolean;
 modelValue: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
 
+export declare const AkTabBar: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
+
+export declare const AkTabBarItem: __VLS_WithTemplateSlots_11<typeof __VLS_component_11, __VLS_TemplateResult_11["slots"]>;
+
 export declare const AkTextarea: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string) => any;
 }, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{
@@ -432,14 +566,25 @@ required: boolean;
 rows: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
 
+/** App mood default when no data-accent is set */
+export declare const appDefaultAccent: AccentPalette;
+
+export declare function applyAccentPalette(root: HTMLElement, palette: AccentPalette | 'auto'): void;
+
 export declare type BadgeVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
 
 export declare type ButtonSize = 'sm' | 'md' | 'lg';
 
 export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
 
+export declare const cuidaIconMap: Map<string, string>;
+
+export declare type CuidaIconName = cIcons;
+
 export declare type DividerSpacing = 'sm' | 'md' | 'lg';
 
+export declare function getCuidaIconMarkup(name: CuidaIconName): string;
+
 export declare type IconButtonSize = 'sm' | 'md' | 'lg';
 
 export declare type IconButtonVariant = 'ghost' | 'secondary' | 'danger';
@@ -450,4 +595,9 @@ export declare type ListRowPadding = 'sm' | 'md';
 
 export declare type ProgressSize = 'sm' | 'md';
 
+export declare function resolveAccentPalette(mood: 'app' | 'site', explicit?: AccentPalette | null): AccentPalette;
+
+/** Site mood default when no data-accent is set */
+export declare const siteDefaultAccent: AccentPalette;
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rafael_dias/akoma",
-  "version": "0.4.0",
+  "version": "0.7.6",
   "description": "A human Vue 3 design system with expressive App and trustworthy Site moods.",
   "type": "module",
   "author": "Rafael",
@@ -29,6 +29,7 @@
     "./tokens.css": "./src/styles/tokens.css",
     "./base.css": "./src/styles/base.css",
     "./motion.css": "./src/styles/motion.css",
+    "./accent-palettes.css": "./src/styles/accent-palettes.css",
     "./content/*": "./content/*"
   },
   "files": [
@@ -48,12 +49,14 @@
     "typecheck": "vue-tsc -p tsconfig.app.json --noEmit"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "@sysvale/cuida-icons": "^1.18.0"
   },
   "dependencies": {
     "vue": "^3.5.0"
   },
   "devDependencies": {
+    "@sysvale/cuida-icons": "^1.18.0",
     "@types/node": "^24.13.2",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/tsconfig": "^0.9.1",

package/src/styles/accent-palettes.css

@@ -0,0 +1,194 @@
+/* Akoma — accent palettes
+ *
+ * Mood (App / Site) controls shape and surfaces.
+ * Accent controls brand color independently.
+ *
+ *   <html data-mood="app" data-accent="teal">
+ *
+ * Without data-accent:
+ *   App  → violet
+ *   Site → evergreen
+ */
+
+:root,
+[data-mood='app']:not([data-accent]) {
+  --accent: #6658b8;
+  --accent-hover: #5548a3;
+  --accent-soft: #ece9f8;
+  --accent-contrast: #ffffff;
+  --bg-tinted: #f1eefb;
+  --orb-1: rgba(102, 88, 184, 0.13);
+}
+
+[data-mood='site']:not([data-accent]) {
+  --accent: #2e684f;
+  --accent-hover: #245640;
+  --accent-soft: #e2eee7;
+  --accent-contrast: #ffffff;
+  --bg-tinted: #f4f5f4;
+  --orb-1: rgba(46, 104, 79, 0.06);
+}
+
+[data-accent='violet'] {
+  --accent: #6658b8;
+  --accent-hover: #5548a3;
+  --accent-soft: #ece9f8;
+  --accent-contrast: #ffffff;
+  --bg-tinted: #f1eefb;
+  --orb-1: rgba(102, 88, 184, 0.13);
+}
+
+[data-accent='evergreen'] {
+  --accent: #2e684f;
+  --accent-hover: #245640;
+  --accent-soft: #e2eee7;
+  --accent-contrast: #ffffff;
+  --bg-tinted: #f2f5f3;
+  --orb-1: rgba(46, 104, 79, 0.07);
+}
+
+[data-accent='teal'] {
+  --accent: #3a7d85;
+  --accent-hover: #2f686f;
+  --accent-soft: #e3eff0;
+  --accent-contrast: #ffffff;
+  --bg-tinted: #e8f2f3;
+  --orb-1: rgba(58, 125, 133, 0.12);
+}
+
+[data-accent='ocean'] {
+  --accent: #3d6a94;
+  --accent-hover: #32577a;
+  --accent-soft: #e5eef5;
+  --accent-contrast: #ffffff;
+  --bg-tinted: #e8f0f7;
+  --orb-1: rgba(61, 106, 148, 0.11);
+}
+
+[data-accent='amber'] {
+  --accent: #9a702d;
+  --accent-hover: #7f5c24;
+  --accent-soft: #f5ecd4;
+  --accent-contrast: #ffffff;
+  --bg-tinted: #f8f2e4;
+  --orb-1: rgba(154, 112, 45, 0.1);
+}
+
+[data-accent='rose'] {
+  --accent: #a8586a;
+  --accent-hover: #8f4a59;
+  --accent-soft: #fae9ed;
+  --accent-contrast: #ffffff;
+  --bg-tinted: #f9eef1;
+  --orb-1: rgba(168, 88, 106, 0.11);
+}
+
+[data-accent='coral'] {
+  --accent: #b5644a;
+  --accent-hover: #9a543e;
+  --accent-soft: #faece8;
+  --accent-contrast: #ffffff;
+  --bg-tinted: #f9f0eb;
+  --orb-1: rgba(181, 100, 74, 0.11);
+}
+
+[data-accent='slate'] {
+  --accent: #4a5d73;
+  --accent-hover: #3c4d60;
+  --accent-soft: #e8ecf1;
+  --accent-contrast: #ffffff;
+  --bg-tinted: #eef1f5;
+  --orb-1: rgba(74, 93, 115, 0.1);
+}
+
+/* Dark — mood defaults */
+[data-theme='dark']:not([data-accent]),
+[data-theme='dark'][data-mood='app']:not([data-accent]) {
+  --accent: #a99ee8;
+  --accent-hover: #bbb2f0;
+  --accent-soft: #39354f;
+  --accent-contrast: #211d38;
+  --bg-tinted: #312e40;
+  --orb-1: rgba(169, 158, 232, 0.11);
+}
+
+[data-theme='dark'][data-mood='site']:not([data-accent]) {
+  --accent: #82b99d;
+  --accent-hover: #96c6ae;
+  --accent-soft: #294438;
+  --accent-contrast: #13241c;
+  --bg-tinted: #252928;
+  --orb-1: rgba(130, 185, 157, 0.06);
+}
+
+[data-theme='dark'][data-accent='violet'] {
+  --accent: #a99ee8;
+  --accent-hover: #bbb2f0;
+  --accent-soft: #39354f;
+  --accent-contrast: #211d38;
+  --bg-tinted: #312e40;
+  --orb-1: rgba(169, 158, 232, 0.11);
+}
+
+[data-theme='dark'][data-accent='evergreen'] {
+  --accent: #82b99d;
+  --accent-hover: #96c6ae;
+  --accent-soft: #294438;
+  --accent-contrast: #13241c;
+  --bg-tinted: #27312c;
+  --orb-1: rgba(130, 185, 157, 0.07);
+}
+
+[data-theme='dark'][data-accent='teal'] {
+  --accent: #7eb8bf;
+  --accent-hover: #95c7cd;
+  --accent-soft: #294548;
+  --accent-contrast: #142528;
+  --bg-tinted: #243638;
+  --orb-1: rgba(126, 184, 191, 0.1);
+}
+
+[data-theme='dark'][data-accent='ocean'] {
+  --accent: #8ab4d9;
+  --accent-hover: #9fc3e2;
+  --accent-soft: #2a3a4a;
+  --accent-contrast: #152130;
+  --bg-tinted: #253545;
+  --orb-1: rgba(138, 180, 217, 0.1);
+}
+
+[data-theme='dark'][data-accent='amber'] {
+  --accent: #d4ad61;
+  --accent-hover: #debb78;
+  --accent-soft: #413823;
+  --accent-contrast: #2a2212;
+  --bg-tinted: #3a3220;
+  --orb-1: rgba(212, 173, 97, 0.09);
+}
+
+[data-theme='dark'][data-accent='rose'] {
+  --accent: #df8a9a;
+  --accent-hover: #e79fad;
+  --accent-soft: #472f35;
+  --accent-contrast: #2a171c;
+  --bg-tinted: #3a2830;
+  --orb-1: rgba(223, 138, 154, 0.1);
+}
+
+[data-theme='dark'][data-accent='coral'] {
+  --accent: #e09a82;
+  --accent-hover: #e8ad99;
+  --accent-soft: #4a322c;
+  --accent-contrast: #2a1a15;
+  --bg-tinted: #3d2e28;
+  --orb-1: rgba(224, 154, 130, 0.1);
+}
+
+[data-theme='dark'][data-accent='slate'] {
+  --accent: #9aadc4;
+  --accent-hover: #aebed1;
+  --accent-soft: #2f3844;
+  --accent-contrast: #171e28;
+  --bg-tinted: #2a323c;
+  --orb-1: rgba(154, 173, 196, 0.1);
+}

package/src/styles/index.css

@@ -1,3 +1,4 @@
 @import './tokens.css';
+@import './accent-palettes.css';
 @import './base.css';
 @import './motion.css';

package/src/styles/motion.css

@@ -16,6 +16,14 @@
   animation: ambient-drift 18s ease-in-out infinite;
 }
 
+[data-mood='site'] .ambient__orb {
+  opacity: 0.2;
+}
+
+[data-mood='site'][data-theme='dark'] .ambient__orb {
+  opacity: 0.14;
+}
+
 .ambient__orb--1 {
   width: 280px;
   height: 280px;