@rafael_dias/akoma 0.3.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,6 +48,25 @@ 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_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_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_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_15> & Readonly<{}>, {
+variant: IconButtonVariant;
+size: IconButtonSize;
+disabled: boolean;
+loading: boolean;
+type: "button" | "submit" | "reset";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+
 declare type __VLS_Props = {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -42,6 +76,72 @@ declare type __VLS_Props = {
     block?: boolean;
 };
 
+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 */
+    label?: string;
+    vertical?: boolean;
+};
+
+declare type __VLS_Props_12 = {
+    /** Current value */
+    value?: number;
+    max?: number;
+    size?: ProgressSize;
+    /** CSS color for the fill (defaults to accent) */
+    color?: string;
+    label?: string;
+    showValue?: boolean;
+};
+
+declare type __VLS_Props_13 = {
+    title?: string;
+};
+
+declare type __VLS_Props_14 = {
+    interactive?: boolean;
+    disabled?: boolean;
+    padding?: ListRowPadding;
+    divider?: boolean;
+};
+
+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_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;
@@ -114,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<{
@@ -166,8 +290,62 @@ declare function __VLS_template_5(): {
     rootEl: HTMLDivElement;
 };
 
+declare function __VLS_template_6(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => unknown;
+        action?: () => unknown;
+    }> & {
+        default?: () => unknown;
+        action?: () => unknown;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+
+declare function __VLS_template_7(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLUListElement;
+};
+
+declare function __VLS_template_8(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        leading?: () => unknown;
+        default?: () => unknown;
+        subtitle?: () => unknown;
+        trailing?: () => unknown;
+    }> & {
+        leading?: () => unknown;
+        default?: () => unknown;
+        subtitle?: () => unknown;
+        trailing?: () => unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_9(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => unknown;
+    }> & {
+        default?: () => unknown;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+
 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>;
@@ -176,12 +354,32 @@ declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
 
 declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
 
+declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
+
+declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
+
+declare type __VLS_TemplateResult_8 = ReturnType<typeof __VLS_template_8>;
+
+declare type __VLS_TemplateResult_9 = ReturnType<typeof __VLS_template_9>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
+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;
@@ -206,6 +404,81 @@ declare type __VLS_WithTemplateSlots_5<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_6<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_7<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_8<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_9<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+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>;
@@ -218,8 +491,19 @@ 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_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, {
 "update:modelValue": (value: string) => any;
 }, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{
@@ -232,6 +516,10 @@ modelValue: string | number;
 required: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
 
+export declare const AkList: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
+
+export declare const AkListRow: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
+
 export declare const Akoma: Plugin_2;
 
 export declare type AkomaOptions = {
@@ -239,12 +527,34 @@ export declare type AkomaOptions = {
     prefix?: string;
 };
 
+export declare const AkProgress: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{}>, {
+size: ProgressSize;
+value: number;
+max: number;
+showValue: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare const AkSectionHeader: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+
 export declare const AkShimmer: DefineComponent<__VLS_Props_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{}>, {
 width: string;
 height: string;
 radius: "sm" | "md" | "lg" | "full" | string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
+export declare const AkSwitch: DefineComponent<__VLS_Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: boolean) => any;
+}, 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<{
@@ -256,12 +566,38 @@ 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';
+
 export declare type InputSize = 'sm' | 'md' | 'lg';
 
+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.3.0",
+  "version": "0.7.6",
   "description": "A human Vue 3 design system with expressive App and trustworthy Site moods.",
   "type": "module",
   "author": "Rafael",
@@ -28,11 +28,14 @@
     "./style.css": "./dist/akoma.css",
     "./tokens.css": "./src/styles/tokens.css",
     "./base.css": "./src/styles/base.css",
-    "./motion.css": "./src/styles/motion.css"
+    "./motion.css": "./src/styles/motion.css",
+    "./accent-palettes.css": "./src/styles/accent-palettes.css",
+    "./content/*": "./content/*"
   },
   "files": [
     "dist",
-    "src/styles"
+    "src/styles",
+    "content"
   ],
   "publishConfig": {
     "access": "public",
@@ -41,20 +44,23 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -p tsconfig.lib.json --declaration --emitDeclarationOnly && vite build --config vite.lib.config.ts",
-    "build:docs": "vite build",
+    "build:docs": "vite build && node scripts/prepare-docs-dist.mjs",
     "preview": "vite preview",
     "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.39"
+    "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",
+    "marked": "^18.0.6",
     "typescript": "~6.0.2",
     "vite": "^8.1.1",
     "vite-plugin-dts": "^4.5.4",

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;