yukit-web 0.0.29 → 0.1.1

package/src/lib/theme/tokens/component-colors.css

@@ -1,95 +1,133 @@
 [data-yuw-color='primary'] {
-  --yuw-accent: var(--accent-primary);
-  --yuw-accent-foreground: var(--neutrals-white);
-  --secondary: var(--sidebar-accent);
-  --secondary-foreground: var(--sidebar-accent-foreground);
-  --yuw-callout-bg: var(--accent-primary-lighter-2);
-}
-
-[data-yuw-color='primary'] button.bg-primary:not(:disabled) {
-  background: var(--gradient-primary-button);
-  border: none;
+  --yuw-accent: var(--primary-fill-cta);
+  --yuw-accent-foreground: var(--primary-on-fill);
+  --secondary: var(--primary-subtle-hover);
+  --secondary-foreground: var(--primary-text);
+  --yuw-callout-bg: var(--primary-subtle);
 }
 
 [data-yuw-color='primary'] button.bg-primary:not(:disabled):hover {
-  background: var(--gradient-primary-button-hover);
+  background: var(--primary-fill-hover);
 }
 
 [data-yuw-color='secondary'] {
+  --yuw-accent: var(--secondary-fill);
+  --yuw-accent-foreground: var(--secondary-on-fill);
+  --secondary: var(--secondary-subtle-hover);
+  --secondary-foreground: var(--secondary-text);
+  --yuw-callout-bg: var(--secondary-subtle);
+}
+
+[data-yuw-color='secondary'] button.bg-primary:not(:disabled):hover {
+  background: var(--secondary-fill-hover);
+}
+
+[data-yuw-color='neutral'] {
   --yuw-accent: var(--neutrals-element-high);
   --yuw-accent-foreground: var(--background);
-  --secondary: var(--neutrals-element-low);
-  --secondary-foreground: var(--neutrals-overlay-accent);
+  --secondary: var(--neutrals-fill);
+  --secondary-foreground: var(--neutrals-element-high);
   --yuw-callout-bg: var(--neutrals-overlay);
 }
 
-[data-yuw-color='secondary'] button.bg-primary:not(:disabled) {
-  background: var(--neutrals-element-high-gradient);
-  border: none;
-}
-
-[data-yuw-color='secondary'] button.bg-primary:not(:disabled):hover {
-  background: var(--neutrals-element-high-gradient-hover);
+[data-yuw-color='neutral'] button.bg-primary:not(:disabled):hover {
+  background: var(--gray-11);
 }
 
 [data-yuw-color='destructive'] {
-  --yuw-accent: var(--feedback-error);
-  --yuw-accent-foreground: var(--neutrals-white);
-  --secondary: var(--feedback-error-light);
-  --secondary-foreground: var(--neutrals-surface);
-  --yuw-callout-bg: var(--feedback-error-lighter-2);
+  --yuw-accent: var(--error-fill);
+  --yuw-accent-foreground: var(--error-on-fill);
+  --secondary: var(--error-subtle-hover);
+  --secondary-foreground: var(--error-text);
+  --yuw-callout-bg: var(--error-subtle);
 }
 
 [data-yuw-color='destructive'] button.bg-primary:not(:disabled):hover {
-  background: var(--feedback-error-dark);
+  background: var(--error-fill-hover);
 }
 
 [data-yuw-color='success'] {
-  --yuw-accent: var(--feedback-success);
-  --yuw-accent-foreground: var(--neutrals-white);
-  --secondary: var(--feedback-success-light);
-  --secondary-foreground: var(--neutrals-surface);
-  --yuw-callout-bg: var(--feedback-success-lighter-2);
+  --yuw-accent: var(--success-fill);
+  --yuw-accent-foreground: var(--success-on-fill);
+  --secondary: var(--success-subtle-hover);
+  --secondary-foreground: var(--success-text);
+  --yuw-callout-bg: var(--success-subtle);
 }
 
 [data-yuw-color='success'] button.bg-primary:not(:disabled):hover {
-  background: var(--feedback-success-dark);
+  background: var(--success-fill-hover);
 }
 
 [data-yuw-color='warning'] {
-  --yuw-accent: var(--feedback-warning);
-  --yuw-accent-foreground: var(--neutrals-white);
-  --secondary: var(--feedback-warning-light);
-  --secondary-foreground: var(--neutrals-surface);
-  --yuw-callout-bg: var(--feedback-warning-lighter-2);
+  --yuw-accent: var(--warning-fill);
+  --yuw-accent-foreground: var(--warning-on-fill);
+  --secondary: var(--warning-subtle-hover);
+  --secondary-foreground: var(--warning-text);
+  --yuw-callout-bg: var(--warning-subtle);
 }
 
 [data-yuw-color='warning'] button.bg-primary:not(:disabled):hover {
-  background: var(--feedback-warning-dark);
+  background: var(--warning-fill-hover);
 }
 
 [data-yuw-color='info'] {
-  --yuw-accent: var(--feedback-info);
-  --yuw-accent-foreground: var(--neutrals-white);
-  --secondary: var(--feedback-info-light);
-  --secondary-foreground: var(--neutrals-surface);
-  --yuw-callout-bg: var(--feedback-info-lighter-2);
+  --yuw-accent: var(--info-fill);
+  --yuw-accent-foreground: var(--info-on-fill);
+  --secondary: var(--info-subtle-hover);
+  --secondary-foreground: var(--info-text);
+  --yuw-callout-bg: var(--info-subtle);
 }
 
 [data-yuw-color='info'] button.bg-primary:not(:disabled):hover {
-  background: var(--feedback-info-dark);
+  background: var(--info-fill-hover);
 }
 
 [data-yuw-color='violet'] {
-  --yuw-accent: var(--feedback-additional);
-  --yuw-accent-foreground: var(--neutrals-white);
-  --secondary: var(--feedback-additional-light);
-  --secondary-foreground: var(--neutrals-surface);
-  --yuw-callout-bg: var(--feedback-additional-lighter-2);
+  --yuw-accent: var(--violet-fill);
+  --yuw-accent-foreground: var(--violet-on-fill);
+  --secondary: var(--violet-subtle-hover);
+  --secondary-foreground: var(--violet-text);
+  --yuw-callout-bg: var(--violet-subtle);
 }
 
 [data-yuw-color='violet'] button.bg-primary:not(:disabled):hover {
-  background: var(--feedback-additional-dark);
+  background: var(--violet-fill-hover);
+}
+
+[data-yuw-color='orange'] {
+  --yuw-accent: var(--orange-fill);
+  --yuw-accent-foreground: var(--orange-on-fill);
+  --secondary: var(--orange-subtle-hover);
+  --secondary-foreground: var(--orange-text);
+  --yuw-callout-bg: var(--orange-subtle);
+}
+
+[data-yuw-color='orange'] button.bg-primary:not(:disabled):hover {
+  background: var(--orange-fill-hover);
+}
+
+[data-yuw-color='pink'] {
+  --yuw-accent: var(--pink-fill);
+  --yuw-accent-foreground: var(--pink-on-fill);
+  --secondary: var(--pink-subtle-hover);
+  --secondary-foreground: var(--pink-text);
+  --yuw-callout-bg: var(--pink-subtle);
+}
+
+[data-yuw-color='pink'] button.bg-primary:not(:disabled):hover {
+  background: var(--pink-fill-hover);
+}
+
+[data-yuw-color='teal'] {
+  --yuw-accent: var(--teal-fill);
+  --yuw-accent-foreground: var(--teal-on-fill);
+  --secondary: var(--teal-subtle-hover);
+  --secondary-foreground: var(--teal-text);
+  --yuw-callout-bg: var(--teal-subtle);
+}
+
+[data-yuw-color='teal'] button.bg-primary:not(:disabled):hover {
+  background: var(--teal-fill-hover);
 }
 
 [data-yuw-color='muted'] {
@@ -122,7 +160,7 @@
   --muted: color-mix(in oklab, var(--yuw-accent) 5%, transparent);
 }
 
-[data-yuw-color='secondary'] {
+[data-yuw-color='neutral'] {
   --border: var(--neutrals-outline-accent);
 }
 
@@ -130,53 +168,8 @@
   --ring: var(--yuw-accent);
 }
 
-.dark [data-yuw-color='primary'] {
-  --yuw-accent: var(--accent-primary-dark);
-  --secondary: var(--sidebar-accent);
-  --secondary-foreground: var(--sidebar-accent-foreground);
-  --yuw-callout-bg: var(--accent-primary-lighter-2);
-}
-
-.dark [data-yuw-color='secondary'] {
-  --secondary: var(--neutrals-element-low);
-  --secondary-foreground: var(--neutrals-overlay-accent);
+.dark [data-yuw-color='neutral'] {
   --input: color-mix(in oklab, var(--yuw-accent) 40%, transparent);
-  --yuw-callout-bg: var(--neutrals-overlay);
-}
-
-.dark [data-yuw-color='destructive'] {
-  --yuw-accent: var(--feedback-error-dark);
-  --secondary: var(--feedback-error-lighter-2);
-  --secondary-foreground: var(--neutrals-white);
-  --yuw-callout-bg: var(--feedback-error-lighter-2);
-}
-
-.dark [data-yuw-color='success'] {
-  --yuw-accent: var(--feedback-success-dark);
-  --secondary: var(--feedback-success-lighter-2);
-  --secondary-foreground: var(--neutrals-white);
-  --yuw-callout-bg: var(--feedback-success-lighter-2);
-}
-
-.dark [data-yuw-color='warning'] {
-  --yuw-accent: var(--feedback-warning-dark);
-  --secondary: var(--feedback-warning-lighter-2);
-  --secondary-foreground: var(--neutrals-white);
-  --yuw-callout-bg: var(--feedback-warning-lighter-2);
-}
-
-.dark [data-yuw-color='info'] {
-  --yuw-accent: var(--feedback-info-dark);
-  --secondary: var(--feedback-info-lighter-2);
-  --secondary-foreground: var(--neutrals-white);
-  --yuw-callout-bg: var(--feedback-info-lighter-2);
-}
-
-.dark [data-yuw-color='violet'] {
-  --yuw-accent-foreground: var(--neutrals-white);
-  --secondary: var(--feedback-additional-dark);
-  --secondary-foreground: var(--neutrals-white);
-  --yuw-callout-bg: var(--feedback-additional-lighter-2);
 }
 
 .dark [data-yuw-color] button.bg-background:not(:disabled):hover {

package/src/lib/theme/tokens/typography.css

@@ -1,7 +1,15 @@
+@font-face {
+  font-family: GeistFont;
+  src: url('font/Geist-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+}
+
 :root {
-  --font-sans: 'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
-  Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  --font-sans:
+    'GeistFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-mono: 'GeistFont', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
 
   /* Type scale — web (default) */
   --text-display-large-weight: 700; /* Bold */

package/types/yukit-web.d.ts

@@ -381,7 +381,7 @@ interface YuwPagedList<Filters> {
  */
 declare function createPagedList<Filters>(options: YuwPagedListOptions<Filters>): YuwPagedList<Filters>;
 
-type YuwColorDto = 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'muted' | 'violet';
+type YuwColorDto = 'primary' | 'secondary' | 'neutral' | 'destructive' | 'success' | 'warning' | 'info' | 'muted' | 'violet' | 'orange' | 'pink' | 'teal';
 
 /**
  * A single action button, rendered as a `<button>` or, when `href` is set, an `<a>`.
@@ -392,7 +392,7 @@ type YuwColorDto = 'primary' | 'secondary' | 'destructive' | 'success' | 'warnin
  * Inputs:
  * - `variant`: Button style variant (`'default'`, `'secondary'`, `'outline'`, `'destructive'`, `'ghost'`, `'link'`). Default is `'default'`.
  * - `size`: Button size (`'default'`, `'sm'`, `'lg'`, `'icon'`, etc.). Default is `'default'`.
- * - `color`: Brand color theme (any `YuwColorDto` value). Default is `'secondary'`.
+ * - `color`: Brand color theme (any `YuwColorDto` value). Default is `'neutral'`.
  * - `disabled`: Disables button interactions.
  * - `type`: HTML button type (`'button'`, `'submit'`, `'reset'`). Default is `'button'`.
  * - `href`: Renders button as an anchor tag navigating to specified URL.
@@ -1272,7 +1272,7 @@ declare class YuwLabel extends HlmLabel {
 
 /**
  * Checkbox control supporting two-way boolean binding, form integration (`ngModel`, `formControlName`),
- * indeterminate state, and secondary styling variant.
+ * indeterminate state, and primary styling variant.
  *
  * Projected content becomes the checkbox's clickable label: the control is wrapped in a `<label>`,
  * so clicking the text toggles it and the text is announced as the accessible name. Without
@@ -1289,7 +1289,7 @@ declare class YuwLabel extends HlmLabel {
  * - `ariaLabel`: Accessible name for screen readers when there's no visible label.
  * - `ariaLabelledby`: ID of an external element that labels the checkbox.
  * - `ariaDescribedby`: ID of an external element that describes the checkbox (hints, errors).
- * - `secondary`: Enables secondary color variant styling.
+ * - `primary`: Primary colour checked state. Defaults to `false` (secondary colour); set `primary` to opt in.
  *
  * Usage:
  * ```html
@@ -1306,15 +1306,15 @@ declare class YuwCheckboxComponent extends YuwValueAccessorBase<boolean> {
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly name: _angular_core.InputSignal<string | undefined>;
+    readonly primary: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly secondary: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly value: _angular_core.ModelSignal<boolean>;
     protected readonly _focusSelectors: string[];
     protected readonly _class: _angular_core.Signal<string>;
     protected _emptyValue(): boolean;
     protected onCheckedChange(checked: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwCheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwCheckboxComponent, "yuw-checkbox", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "value": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "indeterminate": "indeterminateChange"; "value": "checkedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwCheckboxComponent, "yuw-checkbox", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "value": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "indeterminate": "indeterminateChange"; "value": "checkedChange"; }, never, ["*"], true, never>;
 }
 
 type YuwSwitchSizeDto = 'default' | 'xs' | 'sm' | 'lg';
@@ -1330,6 +1330,7 @@ type YuwSwitchSizeDto = 'default' | 'xs' | 'sm' | 'lg';
  * - `checked` (alias for `value`): Two-way boolean on/off state. Bind as `[(checked)]`.
  * - `size`: Track size (`'default'`, `'xs'`, `'sm'`, `'lg'`). Named to match the rest of the
  *   library; the pixel values keep a switch's own proportions rather than the field heights.
+ * - `primary`: Primary colour checked state. Defaults to `false` (secondary colour); set `primary` to opt in.
  * - `disabled`: Disables switch interaction.
  * - `inputId`: HTML `id` for the underlying control, enabling external `<label for="...">` association.
  * - `ariaLabel`: Accessible name for switches with no visible adjacent label.
@@ -1345,6 +1346,7 @@ declare class YuwSwitchComponent extends YuwValueAccessorBase<boolean> {
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
+    readonly primary: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly size: _angular_core.InputSignal<YuwSwitchSizeDto>;
     readonly value: _angular_core.ModelSignal<boolean>;
     protected readonly _focusSelectors: string[];
@@ -1353,7 +1355,7 @@ declare class YuwSwitchComponent extends YuwValueAccessorBase<boolean> {
     protected _emptyValue(): boolean;
     protected onCheckedChange(checked: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSwitchComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSwitchComponent, "yuw-switch", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "value": "checkedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSwitchComponent, "yuw-switch", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "value": "checkedChange"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -1378,6 +1380,7 @@ interface YuwRadioOptionDto {
  * Inputs / Models:
  * - `value`: Two-way selected option value (`string | undefined`). `undefined` means nothing is selected.
  * - `options`: Required array of radio options (`YuwRadioOptionDto[]`).
+ * - `primary`: Primary colour selected dot. Defaults to `false` (secondary colour); set `primary` to opt in.
  * - `disabled`: Disables all radio options.
  * - `required`: Marks the group as required.
  * - `name`: Shared HTML `name` attribute for all radios, making them mutually exclusive in native
@@ -1399,6 +1402,7 @@ declare class YuwRadioGroupComponent extends YuwValueAccessorBase<string | undef
     readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
     readonly name: _angular_core.InputSignal<string | undefined>;
     readonly options: _angular_core.InputSignal<readonly YuwRadioOptionDto[]>;
+    readonly primary: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly userClass: _angular_core.InputSignal<string>;
     readonly value: _angular_core.ModelSignal<string | undefined>;
@@ -1409,7 +1413,7 @@ declare class YuwRadioGroupComponent extends YuwValueAccessorBase<string | undef
     protected _emptyValue(): string | undefined;
     protected onValueChange(next: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwRadioGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwRadioGroupComponent, "yuw-radio-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwRadioGroupComponent, "yuw-radio-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /**
@@ -2514,7 +2518,7 @@ type YuwPopoverAlignDto = 'start' | 'center' | 'end';
  *   over the library defaults via `twMerge`.
  * - `triggerVariant`: Button style variant for the trigger button.
  * - `triggerColor`: Brand color theme for the trigger button (any `YuwColorDto` value). Default is
- *   `'secondary'`.
+ *   `'neutral'`.
  * - `triggerSize`: Button size for the trigger button.
  * - `triggerTransparent`: Strips the trigger's background and border in every state (rest, hover,
  *   open), for triggers whose projected content is the whole control — an avatar, a name, a chevron.