do-ui-design-system 1.1.6 → 1.1.8

package/dist/atoms/Button/Button.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { iProps } from './iProps.ts';
+	import type { ButtonProps } from './iProps.ts';
 
 	let {
 		label,
-		type = 'button',
 		ariaLabel,
-		onClick,
+		ariaDisabled,
 		disabled,
 		title,
-		ariaDisabled,
 		name,
 		id,
 		variant = 'do-btn-primary',
@@ -17,49 +14,24 @@
 		rounded,
 		loading,
 		circle,
-		customStyles,
-		customClass = '',
 		square,
 		noBorder,
 		noHover,
-		anchor,
+		customStyles,
+		customClass = '',
+		data,
+		anchor = false,
+		children,
+		// button
+		onClick,
+		type = 'button',
+		// anchor
+		href,
 		target,
 		download,
 		rel,
-		referrerpolicy,
-		href,
-		data,
-		children
-	}: {
-		label?: iProps['label'];
-		type?: iProps['type'];
-		ariaLabel: iProps['ariaLabel'];
-		onClick: iProps['onClick'];
-		disabled?: iProps['disabled'];
-		title?: iProps['title'];
-		ariaDisabled?: iProps['ariaDisabled'];
-		name?: iProps['name'];
-		id?: iProps['id'];
-		variant?: iProps['variant'];
-		size?: iProps['size'];
-		rounded?: iProps['rounded'];
-		loading?: iProps['loading'];
-		circle?: iProps['circle'];
-		customStyles?: iProps['customStyles'];
-		customClass?: iProps['customClass'];
-		square?: iProps['square'];
-		noBorder?: iProps['noBorder'];
-		noHover?: iProps['noHover'];
-		anchor?: iProps['anchor'];
-		target?: iProps['target'];
-		download?: iProps['download'];
-		rel?: iProps['rel'];
-		referrerpolicy?: iProps['referrerpolicy'];
-		// dataTestId?: iProps['dataTestId'];
-		data?: iProps['data'];
-		href?: iProps['href'];
-		children?: Snippet;
-	} = $props();
+		referrerpolicy
+	}: ButtonProps = $props();
 
 	let borderRadius = $state('');
 	let mergedStyles = $state('');
@@ -102,7 +74,14 @@
 	- `customStyles?`: any CSS style
 	- `noBorder`?: boolean
 	- `data?`: {[key: string]: string}
+	- `noHover?`: boolean;
 	- `anchor?`: boolean (use `<a>` tag instead of `<button>`)
+	- `target?`: '_self' | '_blank' | '_parent' | '_top'
+	- `download?`: boolean | string;
+	- `rel?`: string
+	- `referrerpolicy?`:'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'
+		// dataTestId?: iProps['dataTestId'];
+	- `href?`: string;
 -->
 {#if anchor}
 	<a

package/dist/atoms/Button/Button.svelte.d.ts

@@ -1,34 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { iProps } from './iProps.ts';
-type $$ComponentProps = {
-    label?: iProps['label'];
-    type?: iProps['type'];
-    ariaLabel: iProps['ariaLabel'];
-    onClick: iProps['onClick'];
-    disabled?: iProps['disabled'];
-    title?: iProps['title'];
-    ariaDisabled?: iProps['ariaDisabled'];
-    name?: iProps['name'];
-    id?: iProps['id'];
-    variant?: iProps['variant'];
-    size?: iProps['size'];
-    rounded?: iProps['rounded'];
-    loading?: iProps['loading'];
-    circle?: iProps['circle'];
-    customStyles?: iProps['customStyles'];
-    customClass?: iProps['customClass'];
-    square?: iProps['square'];
-    noBorder?: iProps['noBorder'];
-    noHover?: iProps['noHover'];
-    anchor?: iProps['anchor'];
-    target?: iProps['target'];
-    download?: iProps['download'];
-    rel?: iProps['rel'];
-    referrerpolicy?: iProps['referrerpolicy'];
-    data?: iProps['data'];
-    href?: iProps['href'];
-    children?: Snippet;
-};
+import type { ButtonProps } from './iProps.ts';
 /**
  * ```Svelte
  *  <Button variant?={variant} size?={size} label?={label} disabled?={disabled} loading?={loading} type?={type} data={{'data-*': 'id'}}/>
@@ -50,9 +20,16 @@ type $$ComponentProps = {
  * - `customStyles?`: any CSS style
  * - `noBorder`?: boolean
  * - `data?`: {[key: string]: string}
+ * - `noHover?`: boolean;
  * - `anchor?`: boolean (use `<a>` tag instead of `<button>`)
+ * - `target?`: '_self' | '_blank' | '_parent' | '_top'
+ * - `download?`: boolean | string;
+ * - `rel?`: string
+ * - `referrerpolicy?`:'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'
+ * 	// dataTestId?: iProps['dataTestId'];
+ * - `href?`: string;
  */
-declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;
 //# sourceMappingURL=Button.svelte.d.ts.map

package/dist/atoms/Button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAE1C,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA4EH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA8E/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/atoms/Button/iProps.d.ts

@@ -1,31 +1,47 @@
-export interface iProps {
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+export interface ButtonBaseProps {
     label?: string;
-    type?: 'button' | 'submit' | 'reset';
     ariaLabel: string;
-    onClick: () => void;
+    ariaDisabled?: boolean;
     disabled?: boolean;
     title?: string;
-    ariaDisabled?: boolean;
     name?: string;
     id?: string;
-    variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent' | 'do-btn-link-accent' | 'do-btn-ghost';
+    variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-link-accent' | 'do-btn-accent' | 'do-btn-ghost';
     size?: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg';
     rounded?: boolean;
     loading?: boolean;
     circle?: boolean;
-    customStyles?: string;
-    customClass?: string;
     square?: boolean;
     noBorder?: boolean;
     noHover?: boolean;
-    anchor?: boolean;
-    target?: '_self' | '_blank' | '_parent' | '_top';
-    download?: '';
-    rel?: string;
-    referrerpolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
-    href?: string;
+    customStyles?: string;
+    customClass?: string;
     data?: {
         [key: string]: string;
     };
+    children?: Snippet;
+}
+export interface ButtonAsButtonProps extends ButtonBaseProps {
+    anchor?: false | undefined;
+    type?: 'button' | 'submit' | 'reset';
+    onClick?: () => void;
+    href?: never;
+    target?: never;
+    download?: never;
+    rel?: never;
+    referrerpolicy?: never;
+}
+export interface ButtonAsAnchorProps extends ButtonBaseProps {
+    anchor: true;
+    href: string;
+    target?: HTMLAnchorAttributes['target'];
+    download?: HTMLAnchorAttributes['download'];
+    rel?: HTMLAnchorAttributes['rel'];
+    referrerpolicy?: HTMLAnchorAttributes['referrerpolicy'];
+    onClick?: never;
+    type?: never;
 }
+export type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
 //# sourceMappingURL=iProps.d.ts.map

package/dist/atoms/Button/iProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EACL,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,cAAc,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,QAAQ,CAAC,EAAE,EAAE,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EACZ,aAAa,GACb,4BAA4B,GAC5B,QAAQ,GACR,0BAA0B,GAC1B,aAAa,GACb,iCAAiC,GACjC,YAAY,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACjC"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,OAAO,CAAC,EACL,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,aAAa,GACb,oBAAoB,GACpB,eAAe,GACf,cAAc,CAAC;IAElB,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC3D,MAAM,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC;CACvB;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC3D,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;CACb;AAED,MAAM,MAAM,WAAW,GAAG,mBAAmB,GAAG,mBAAmB,CAAC"}

package/dist/atoms/Icons/iProps.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLLabelAttributes } from 'svelte/elements';
 import { type IconNames } from './../../do-theme/icomoon/iconList.ts';
 export interface iProps extends HTMLLabelAttributes {
-    name: IconNames | '';
+    name: IconNames | string;
     color?: string;
     size?: string;
     ariaHidden?: boolean;

package/dist/atoms/Icons/iProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Icons/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEtE,MAAM,WAAW,MAAO,SAAQ,mBAAmB;IAClD,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,GAAG,cAAc,GAAG,MAAM,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Icons/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEtE,MAAM,WAAW,MAAO,SAAQ,mBAAmB;IAClD,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,GAAG,cAAc,GAAG,MAAM,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/do-theme/button.css

@@ -55,24 +55,36 @@
 	background-color: var(--do-btn-primary-hover);
 	border-color: var(--do-btn-primary-border-hover);
 	color: var(--do-btn-primary-content-hover);
+	span {
+		color: var(--do-btn-primary-content-hover);
+	}
 }
 
 .do-btn-secondary {
 	background-color: var(--do-btn-secondary-bg);
 	border-color: var(--do-btn-secondary-border);
 	color: var(--do-btn-secondary-content);
+	span {
+		color: var(--do-btn-secondary-content);
+	}
 }
 
 .do-btn-secondary:hover {
 	color: var(--do-btn-secondary-content-hover);
 	border-color: var(--do-transparent);
 	background-color: var(--do-btn-secondary-hover);
+	span {
+		color: var(--do-btn-secondary-content-hover);
+	}
 }
 
 .do-btn-tertiary {
 	background-color: var(--do-btn-tertiary-bg);
 	border-color: var(--do-btn-tertiary-border);
 	color: var(--do-btn-tertiary-content);
+	span {
+		color: var(--do-btn-tertiary-content);
+	}
 }
 
 .do-btn-tertiary:hover,
@@ -80,12 +92,18 @@
 	background-color: var(--do-btn-tertiary-content);
 	border-color: var(--do-btn-tertiary-content);
 	color: var(--do-btn-tertiary-hover-content);
+	span {
+		color: var(--do-btn-tertiary-hover-content);
+	}
 }
 
 .do-btn-accent {
 	background-color: var(--do-btn-accent-bg);
 	border-color: var(--do-btn-accent-border);
 	color: var(--do-btn-accent-content);
+	span {
+		color: var(--do-btn-accent-content);
+	}
 }
 
 .do-btn-accent:hover,
@@ -93,6 +111,9 @@
 	color: var(--do-btn-accent-hover-content);
 	border: 1px solid var(--do-btn-accent-hover-border);
 	background-color: var(--do-btn-accent-hover-bg);
+	span {
+		color: var(--do-btn-accent-hover-content);
+	}
 }
 
 .do-btn-link {
@@ -104,19 +125,19 @@
 
 .do-btn-link span {
 	text-decoration: underline;
+	color: currentColor;
 }
 
-.do-btn-link:hover,
-.do-btn-link:focus {
-	color: var(--do-btn-link-hover-content);
-	border-color: 1px solid var(--do-btn-link-hover-border);
-	background-color: var(--do-transparent);
+.do-btn-link i,
+.do-btn-link svg {
+	color: currentColor;
+	fill: currentColor;
 }
 
 .do-btn-link:not(.no-hover):hover,
 .do-btn-link:not(.no-hover):focus {
-	color: var(--do-transparent);
-	border: 1px solid var(--do-transparent);
+	color: var(--do-btn-link-hover-content);
+	border-color: var(--do-btn-link-hover-border);
 	background-color: var(--do-transparent);
 }
 
@@ -129,6 +150,7 @@
 
 .do-btn-link-accent span {
 	text-decoration: underline;
+	color: var(--do-btn-link-secondary);
 }
 
 .do-btn-link-accent:hover,
@@ -136,6 +158,9 @@
 	color: var(--do-btn-primary-content);
 	border-color: var(--do-btn-primary-border);
 	background-color: var(--do-btn-link-secondary-hover);
+	span {
+		color: var(--do-btn-primary-content);
+	}
 }
 
 .do-btn-ghost {