@dezkareid/components 1.0.0 → 1.0.2

package/dist/components.min.css

@@ -1 +1 @@
-.button-module_button__-i1WR{align-items:center;border:none;border-radius:var(--spacing-4);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);justify-content:center;line-height:var(--font-line-height-none);text-decoration:none;transition:opacity .15s ease;white-space:nowrap}.button-module_button--sm__oyPIp,.button-module_button--small__seN6c{font-size:var(--font-size-200);padding:var(--spacing-4) var(--spacing-12)}.button-module_button--md__KsJg5,.button-module_button--medium__4vh1u{font-size:var(--font-size-300);padding:var(--spacing-8) var(--spacing-24)}.button-module_button--large__g15uD,.button-module_button--lg__kuuR5{font-size:var(--font-size-400);padding:var(--spacing-12) var(--spacing-32)}.button-module_button--primary__5NKaZ{background-color:var(--color-primary);border:1px solid transparent;color:var(--color-text-inverse)}.button-module_button--primary__5NKaZ:hover:not(.button-module_button--disabled__5X7It){opacity:.88}.button-module_button--outline__inPG2,.button-module_button--secondary__7CZqp{background-color:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}.button-module_button--outline__inPG2:hover:not(.button-module_button--disabled__5X7It),.button-module_button--secondary__7CZqp:hover:not(.button-module_button--disabled__5X7It){background-color:var(--color-background-secondary)}.button-module_button--success__Y-GUS{background-color:var(--color-success);border:1px solid transparent;color:var(--color-text-inverse)}.button-module_button--success__Y-GUS:hover:not(.button-module_button--disabled__5X7It){opacity:.88}.button-module_button--ghost__7k3yA{background-color:transparent;border:1px solid transparent;color:var(--color-text-primary)}.button-module_button--ghost__7k3yA:hover:not(.button-module_button--disabled__5X7It){background-color:var(--color-background-secondary)}.button-module_button--disabled__5X7It{cursor:not-allowed;opacity:.4;pointer-events:none}.tag-module_tag__DqU0X{align-items:center;border-radius:var(--spacing-4);display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-100);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-none);padding:var(--spacing-4) var(--spacing-8)}.tag-module_tag--default__s9pfU{background-color:var(--color-background-secondary);color:var(--color-text-primary)}.tag-module_tag--success__e8fMj{background-color:var(--color-success);color:var(--color-text-inverse)}.tag-module_tag--danger__9b-l4{background-color:var(--color-danger);color:var(--color-text-inverse)}.card-module_card__KEaH3{background-color:var(--color-background-secondary);border-radius:var(--spacing-8);color:var(--color-text-primary);display:block;padding:var(--spacing-24);width:100%}.card-module_card--raised__hBodH{box-shadow:0 2px 8px rgba(0,0,0,.12)}.card-module_card--flat__vLG1l{box-shadow:none}.theme-toggle-module_theme-toggle__pBmqG{align-items:center;background-color:transparent;border:none;border:1px solid var(--color-background-secondary);border-radius:var(--spacing-4);color:var(--color-text-primary);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-200);font-weight:var(--font-weight-medium);gap:var(--spacing-8);justify-content:center;line-height:var(--font-line-height-none);padding:var(--spacing-8) var(--spacing-12)}.theme-toggle-module_theme-toggle__pBmqG:hover{background-color:var(--color-background-secondary)}.theme-toggle-module_theme-toggle--dark__9yf3H{border-color:var(--color-primary);color:var(--color-primary)}
+.button-module_button__-i1WR{align-items:center;border:none;border-radius:var(--border-radius-medium);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-300);font-weight:var(--font-weight-medium);gap:var(--spacing-8);justify-content:center;letter-spacing:var(--font-letter-spacing-wide);line-height:var(--font-line-height-none);text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;white-space:nowrap}.button-module_button__-i1WR:focus-visible{box-shadow:0 0 0 2px var(--color-background-primary),0 0 0 4px var(--color-primary);outline:none}.button-module_button--sm__oyPIp,.button-module_button--small__seN6c{border-radius:var(--border-radius-small);font-size:var(--font-size-200);padding:var(--spacing-4) var(--spacing-12)}.button-module_button--md__KsJg5,.button-module_button--medium__4vh1u{font-size:var(--font-size-300);padding:var(--spacing-8) var(--spacing-24)}.button-module_button--large__g15uD,.button-module_button--lg__kuuR5{border-radius:var(--border-radius-large);font-size:var(--font-size-400);padding:var(--spacing-12) var(--spacing-32)}.button-module_button--primary__5NKaZ{--button-primary-color-background:var(--color-primary);--button-primary-color-text:var(--color-text-inverse);background-color:var(--button-primary-color-background);border:1px solid transparent;color:var(--button-primary-color-text)}.button-module_button--primary__5NKaZ:hover:not(.button-module_button--disabled__5X7It){box-shadow:var(--shadow-card-hover);opacity:.92}.button-module_button--outline__inPG2,.button-module_button--secondary__7CZqp{--button-secondary-color-background:transparent;--button-secondary-color-text:var(--color-primary);--button-secondary-color-border:var(--color-primary);background-color:var(--button-secondary-color-background);border:1px solid var(--button-secondary-color-border);color:var(--button-secondary-color-text)}.button-module_button--outline__inPG2:hover:not(.button-module_button--disabled__5X7It),.button-module_button--secondary__7CZqp:hover:not(.button-module_button--disabled__5X7It){background-color:var(--color-background-secondary);box-shadow:var(--shadow-subtle)}.button-module_button--success__Y-GUS{--button-success-color-background:var(--color-success);--button-success-color-text:var(--color-text-primary);background-color:var(--button-success-color-background);border:1px solid transparent;color:var(--button-success-color-text)}.button-module_button--success__Y-GUS:hover:not(.button-module_button--disabled__5X7It){box-shadow:var(--shadow-card-hover);opacity:.92}.button-module_button--ghost__7k3yA{--button-ghost-color-background:transparent;--button-ghost-color-text:var(--color-text-primary);background-color:var(--button-ghost-color-background);border:1px solid transparent;color:var(--button-ghost-color-text)}.button-module_button--ghost__7k3yA:hover:not(.button-module_button--disabled__5X7It){background-color:var(--color-background-secondary);border-color:var(--color-background-secondary)}.button-module_button--disabled__5X7It{cursor:not-allowed;opacity:.4;pointer-events:none}.tag-module_tag__DqU0X{align-items:center;border-radius:var(--spacing-12);display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-100);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-none);padding:var(--spacing-4) var(--spacing-8)}.tag-module_tag--default__s9pfU{--tag-default-color-background:var(--color-background-secondary);--tag-default-color-text:var(--color-text-primary);background-color:var(--tag-default-color-background);color:var(--tag-default-color-text)}.tag-module_tag--success__e8fMj{--tag-success-color-background:var(--color-success);--tag-success-color-text:var(--color-text-inverse);background-color:var(--tag-success-color-background);color:var(--tag-success-color-text)}.tag-module_tag--danger__9b-l4{--tag-danger-color-background:var(--color-danger);--tag-danger-color-text:var(--color-text-inverse);background-color:var(--tag-danger-color-background);color:var(--tag-danger-color-text)}.tag-module_tag--warning__aHbOj{--tag-warning-color-background:#d97706;--tag-warning-color-text:var(--color-text-inverse);background-color:var(--tag-warning-color-background);color:var(--tag-warning-color-text)}.card-module_card__KEaH3{background-color:var(--color-background-secondary);border-radius:var(--spacing-8);color:var(--color-text-primary);display:block;padding:var(--spacing-24);width:100%}.card-module_card--raised__hBodH{box-shadow:0 2px 8px rgba(0,0,0,.12)}.card-module_card--flat__vLG1l{border:1px solid var(--color-background-secondary);box-shadow:none}.theme-toggle-module_theme-toggle__pBmqG{align-items:center;background-color:transparent;border:none;border:1px solid var(--color-background-secondary);border-radius:var(--spacing-4);color:var(--color-text-primary);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-200);font-weight:var(--font-weight-medium);gap:var(--spacing-8);justify-content:center;line-height:var(--font-line-height-none);padding:var(--spacing-8) var(--spacing-12)}.theme-toggle-module_theme-toggle__pBmqG:hover{background-color:var(--color-background-secondary)}.theme-toggle-module_theme-toggle--dark__9yf3H{border-color:var(--color-primary);color:var(--color-primary)}.theme-toggle-module_theme-toggle__icon__YJaUi{flex-shrink:0;height:1em;width:1em}.theme-toggle-module_theme-toggle__wrapper__Q0frz{display:inline-flex;position:relative}.theme-toggle-module_sr-only__OgD4W{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/css/tag.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"tag":"tag-module_tag__DqU0X","tag--default":"tag-module_tag--default__s9pfU","tag--success":"tag-module_tag--success__e8fMj","tag--danger":"tag-module_tag--danger__9b-l4"};
+var styles = {"tag":"tag-module_tag__DqU0X","tag--default":"tag-module_tag--default__s9pfU","tag--success":"tag-module_tag--success__e8fMj","tag--danger":"tag-module_tag--danger__9b-l4","tag--warning":"tag-module_tag--warning__aHbOj"};
 
 export { styles as default };
 //# sourceMappingURL=tag.module.css.js.map

package/dist/css/theme-toggle.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"theme-toggle":"theme-toggle-module_theme-toggle__pBmqG","theme-toggle--dark":"theme-toggle-module_theme-toggle--dark__9yf3H"};
+var styles = {"theme-toggle":"theme-toggle-module_theme-toggle__pBmqG","theme-toggle--dark":"theme-toggle-module_theme-toggle--dark__9yf3H","theme-toggle__icon":"theme-toggle-module_theme-toggle__icon__YJaUi","theme-toggle__wrapper":"theme-toggle-module_theme-toggle__wrapper__Q0frz","sr-only":"theme-toggle-module_sr-only__OgD4W"};
 
 export { styles as default };
 //# sourceMappingURL=theme-toggle.module.css.js.map

package/dist/react/Button/index.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes } from 'react';
-import type { ButtonProps } from '../../shared/types/button';
-type Props = ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
-export declare function Button({ variant, size, disabled, children, className, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+import type { ButtonProperties } from '../../shared/types/button';
+type Properties = ButtonProperties & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare function Button({ variant, size, disabled, children, className, ...rest }: Properties): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/react/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAG7D,KAAK,KAAK,GAAG,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEnE,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAW,EACX,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CAgBP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,KAAK,UAAU,GAAG,gBAAgB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE7E,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAW,EACX,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,UAAU,2CAiBZ"}

package/dist/react/Button/index.js

@@ -3,7 +3,7 @@ import cx from '../../_virtual/index.js';
 import styles from '../../css/button.module.css.js';
 
 function Button({ variant = 'primary', size = 'md', disabled = false, children, className, ...rest }) {
-    return (jsx("button", { className: cx(styles.button, styles[`button--${variant}`], styles[`button--${size}`], disabled && styles['button--disabled'], className), disabled: disabled, ...rest, children: children }));
+    return (jsx("button", { className: cx(styles.button, styles[`button--${variant}`], styles[`button--${size}`], disabled && styles['button--disabled'], className), disabled: disabled, "aria-disabled": disabled, ...rest, children: children }));
 }
 
 export { Button };

package/dist/react/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/Button/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACD,EAAA;AACN,IAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,WAAW,OAAO,CAAA,CAAE,CAAC,EAC5B,MAAM,CAAC,CAAA,QAAA,EAAW,IAAI,EAAE,CAAC,EACzB,QAAQ,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACtC,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAAA,GACd,IAAI,YAEP,QAAQ,EAAA,CACF;AAEb;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/Button/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACI,EAAA;IACX,QACEA,gBACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE,CAAC,EAC5B,MAAM,CAAC,WAAW,IAAI,CAAA,CAAE,CAAC,EACzB,QAAQ,IAAI,MAAM,CAAC,kBAAkB,CAAC,EACtC,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,mBACH,QAAQ,EAAA,GACnB,IAAI,EAAA,QAAA,EAEP,QAAQ,EAAA,CACF;AAEb;;;;"}

package/dist/react/Card/index.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
-import type { CardProps } from '../../shared/types/card';
-type Props = CardProps & HTMLAttributes<HTMLDivElement>;
-export declare function Card({ elevation, children, className, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+import type { CardProperties } from '../../shared/types/card';
+type Properties = CardProperties & HTMLAttributes<HTMLDivElement>;
+export declare function Card({ elevation, children, className, ...rest }: Properties): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/react/Card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGzD,KAAK,KAAK,GAAG,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAExD,wBAAgB,IAAI,CAAC,EAAE,SAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAMjF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,KAAK,UAAU,GAAG,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,wBAAgB,IAAI,CAAC,EAAE,SAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,2CAMtF"}

package/dist/react/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/Card/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAS,EAAA;IAChF,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,SAAS,CAAA,CAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,IAAI,EAAA,QAAA,EAC/E,QAAQ,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/Card/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAc,EAAA;IACrF,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,SAAS,CAAA,CAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,IAAI,EAAA,QAAA,EAC/E,QAAQ,EAAA,CACL;AAEV;;;;"}

package/dist/react/Tag/index.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
-import type { TagProps } from '../../shared/types/tag';
-type Props = TagProps & HTMLAttributes<HTMLSpanElement>;
-export declare function Tag({ variant, children, className, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+import type { TagProperties } from '../../shared/types/tag';
+type Properties = TagProperties & HTMLAttributes<HTMLSpanElement>;
+export declare function Tag({ variant, children, className, ...rest }: Properties): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/react/Tag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGvD,KAAK,KAAK,GAAG,QAAQ,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAExD,wBAAgB,GAAG,CAAC,EAAE,OAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAM/E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG5D,KAAK,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAElE,wBAAgB,GAAG,CAAC,EAAE,OAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,2CAMpF"}

package/dist/react/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/Tag/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAS,EAAA;IAC9E,QACEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,OAAO,CAAA,CAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,IAAI,EAAA,QAAA,EAC5E,QAAQ,EAAA,CACJ;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/Tag/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAc,EAAA;IACnF,QACEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,OAAO,CAAA,CAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,IAAI,EAAA,QAAA,EAC5E,QAAQ,EAAA,CACJ;AAEX;;;;"}

package/dist/react/ThemeToggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/ThemeToggle/index.tsx"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,4CA6B1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/ThemeToggle/index.tsx"],"names":[],"mappings":"AA8CA,wBAAgB,WAAW,4CAqC1B"}

package/dist/react/ThemeToggle/index.js

@@ -1,13 +1,16 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import cx from '../../_virtual/index.js';
 import { getInitialTheme, applyTheme, persistTheme } from '../../shared/js/theme.js';
 import styles from '../../css/theme-toggle.module.css.js';
 
+const SunIcon = (jsxs("svg", { "aria-hidden": "true", className: styles['theme-toggle__icon'], xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("circle", { cx: "12", cy: "12", r: "5" }), jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })] }));
+const MoonIcon = (jsx("svg", { "aria-hidden": "true", className: styles['theme-toggle__icon'], xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
 function ThemeToggle() {
     const [theme, setTheme] = useState('light');
     useEffect(() => {
         const initial = getInitialTheme();
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
         setTheme(initial);
         applyTheme(initial);
     }, []);
@@ -18,7 +21,8 @@ function ThemeToggle() {
         persistTheme(next);
     }
     const isDark = theme === 'dark';
-    return (jsx("button", { type: "button", className: cx(styles['theme-toggle'], isDark && styles['theme-toggle--dark']), onClick: toggle, "aria-label": isDark ? 'Switch to light mode' : 'Switch to dark mode', "aria-pressed": isDark, children: isDark ? 'Dark' : 'Light' }));
+    const label = isDark ? 'Dark' : 'Light';
+    return (jsxs("span", { className: styles['theme-toggle__wrapper'], children: [jsxs("button", { type: "button", className: cx(styles['theme-toggle'], isDark && styles['theme-toggle--dark']), onClick: toggle, "aria-label": isDark ? 'Switch to light mode' : 'Switch to dark mode', "aria-pressed": isDark, children: [isDark ? MoonIcon : SunIcon, label] }), jsxs("span", { "aria-live": "polite", className: styles['sr-only'], children: [label, " mode active"] })] }));
 }
 
 export { ThemeToggle };

package/dist/react/ThemeToggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/ThemeToggle/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;SAMgB,WAAW,GAAA;IACzB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,OAAO,CAAC;IAElD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAG,eAAe,EAAE;QACjC,QAAQ,CAAC,OAAO,CAAC;QACjB,UAAU,CAAC,OAAO,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,MAAM,GAAA;AACb,QAAA,MAAM,IAAI,GAAU,KAAK,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO;QACxD,QAAQ,CAAC,IAAI,CAAC;QACd,UAAU,CAAC,IAAI,CAAC;QAChB,YAAY,CAAC,IAAI,CAAC;IACpB;AAEA,IAAA,MAAM,MAAM,GAAG,KAAK,KAAK,MAAM;IAE/B,QACEA,gBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,IAAI,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAC7E,OAAO,EAAE,MAAM,EAAA,YAAA,EACH,MAAM,GAAG,sBAAsB,GAAG,qBAAqB,EAAA,cAAA,EACrD,MAAM,YAEnB,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,CACnB;AAEb;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/ThemeToggle/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/shared/js/theme.js

@@ -1,19 +1,19 @@
 const STORAGE_KEY = 'color-scheme';
 function getInitialTheme() {
-    if (typeof window === 'undefined')
+    if (globalThis.window === undefined)
         return 'light';
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored === 'light' || stored === 'dark')
         return stored;
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    return globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 function applyTheme(theme) {
-    if (typeof window === 'undefined')
+    if (globalThis.window === undefined)
         return;
     document.documentElement.setAttribute('color-scheme', theme);
 }
 function persistTheme(theme) {
-    if (typeof window === 'undefined')
+    if (globalThis.window === undefined)
         return;
     localStorage.setItem(STORAGE_KEY, theme);
 }

package/dist/shared/js/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../src/shared/js/theme.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG,cAAc;SAElB,eAAe,GAAA;IAC7B,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,QAAA,OAAO,OAAO;IAEjD,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;AAChD,IAAA,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,MAAM;AAAE,QAAA,OAAO,MAAM;AAE1D,IAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACrF;AAEM,SAAU,UAAU,CAAC,KAAY,EAAA;IACrC,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE;IACnC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC;AAC9D;AAEM,SAAU,YAAY,CAAC,KAAY,EAAA;IACvC,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE;AACnC,IAAA,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC;AAC1C;;;;"}
+{"version":3,"file":"theme.js","sources":["../../../src/shared/js/theme.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG,cAAc;SAElB,eAAe,GAAA;AAC7B,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,SAAS;AAAE,QAAA,OAAO,OAAO;IAEnD,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;AAChD,IAAA,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,MAAM;AAAE,QAAA,OAAO,MAAM;AAE1D,IAAA,OAAO,UAAU,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACzF;AAEM,SAAU,UAAU,CAAC,KAAY,EAAA;AACrC,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,SAAS;QAAE;IACrC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC;AAC9D;AAEM,SAAU,YAAY,CAAC,KAAY,EAAA;AACvC,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,SAAS;QAAE;AACrC,IAAA,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC;AAC1C;;;;"}

package/dist/shared/types/button.d.ts

@@ -1,6 +1,6 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'success';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
-export interface ButtonProps {
+export interface ButtonProperties {
     variant?: ButtonVariant;
     size?: ButtonSize;
     disabled?: boolean;

package/dist/shared/types/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/shared/types/button.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/shared/types/button.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/shared/types/card.d.ts

@@ -1,5 +1,6 @@
 export type CardElevation = 'flat' | 'raised';
-export interface CardProps {
+export interface CardProperties {
     elevation?: CardElevation;
+    role?: string;
 }
 //# sourceMappingURL=card.d.ts.map

package/dist/shared/types/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/shared/types/card.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/shared/types/card.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/shared/types/tag.d.ts

@@ -1,5 +1,5 @@
-export type TagVariant = 'default' | 'success' | 'danger';
-export interface TagProps {
+export type TagVariant = 'default' | 'success' | 'danger' | 'warning';
+export interface TagProperties {
     variant?: TagVariant;
 }
 //# sourceMappingURL=tag.d.ts.map

package/dist/shared/types/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/shared/types/tag.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,QAAQ;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/shared/types/tag.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtE,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB"}

package/dist/shared/types/theme-toggle.d.ts

@@ -1,4 +1,3 @@
 export type Theme = 'light' | 'dark';
-export interface ThemeToggleProps {
-}
+export type ThemeToggleProperties = Record<never, never>;
 //# sourceMappingURL=theme-toggle.d.ts.map

package/dist/shared/types/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/shared/types/theme-toggle.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,WAAW,gBAAgB;CAEhC"}
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/shared/types/theme-toggle.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC"}

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@dezkareid/components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "description": "A package to export UI components in formats like React, Astro, Vue, etc.",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
   "exports": {
     "./react": {
       "types": "./dist/react/index.d.ts",
@@ -43,7 +48,7 @@
     "vue"
   ],
   "peerDependencies": {
-    "astro": ">=4.0.0",
+    "astro": ">=6.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "vue": "^3.0.0"
@@ -67,26 +72,34 @@
     "@dezkareid/design-tokens": "0.0.0"
   },
   "devDependencies": {
+    "astro": "6.0.6",
+    "@eslint/js": "9.39.2",
     "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-typescript": "12.3.0",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.5.2",
-    "@types/classnames": "^2.3.4",
+    "@types/classnames": "2.3.4",
     "@types/react": "19.2.9",
     "@vitejs/plugin-react": "5.1.4",
+    "eslint": "9.39.2",
     "jsdom": "27.4.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "rollup": "4.56.0",
     "rollup-plugin-postcss": "4.0.2",
     "typescript": "5.9.3",
+    "typescript-eslint": "8.57.0",
     "vite": "7.3.1",
-    "vitest": "4.0.18"
+    "vitest": "4.0.18",
+    "@dezkareid/eslint-config-ts-base": "^0.0.0",
+    "@dezkareid/eslint-plugin-web": "^0.0.0"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",
-    "test": "vitest --run"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest --run --config vitest.config.ts"
   }
 }

package/src/astro/Button/index.astro

@@ -30,6 +30,6 @@ const classes = [
   .join(' ');
 ---
 
-<Tag class={classes} href={href} disabled={!href && disabled} {...rest}>
+<Tag class={classes} href={href} disabled={!href && disabled} aria-disabled={!href && disabled} {...rest}>
   <slot />
 </Tag>

package/src/astro/ThemeToggle/index.astro

@@ -8,6 +8,9 @@ type Props = {
 const { class: className } = Astro.props;
 
 const classes = [styles['theme-toggle'], className ?? ''].filter(Boolean).join(' ');
+const wrapperClass = styles['theme-toggle__wrapper'];
+const iconClass = styles['theme-toggle__icon'];
+const srOnlyClass = styles['sr-only'];
 ---
 
 <!--
@@ -27,28 +30,63 @@ const classes = [styles['theme-toggle'], className ?? ''].filter(Boolean).join('
   })();
 </script>
 
-<button
-  type="button"
-  class={classes}
-  data-theme-toggle
-  aria-label="Toggle colour scheme"
->
-  <span data-theme-label>Light</span>
-</button>
+<span class={wrapperClass}>
+  <button
+    type="button"
+    class={classes}
+    data-theme-toggle
+    aria-label="Toggle colour scheme"
+    aria-pressed="false"
+  >
+    <!-- Sun icon (light mode default) -->
+    <svg
+      aria-hidden="true"
+      class={iconClass}
+      data-theme-icon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+    <span data-theme-label>Light</span>
+  </button>
+  <span aria-live="polite" class={srOnlyClass} data-theme-live>Light mode active</span>
+</span>
 
 <script>
   import { getInitialTheme, applyTheme, persistTheme } from '../../shared/js/theme';
 
   const btn = document.querySelector('[data-theme-toggle]') as HTMLButtonElement | null;
   const label = document.querySelector('[data-theme-label]') as HTMLElement | null;
+  const liveRegion = document.querySelector('[data-theme-live]') as HTMLElement | null;
+  const iconEl = document.querySelector('[data-theme-icon]') as SVGElement | null;
+
+  const sunPath = `<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>`;
+  const moonPath = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>`;
 
   if (btn && label) {
     let current = getInitialTheme();
 
     function update(theme: 'light' | 'dark') {
-      label!.textContent = theme === 'dark' ? 'Dark' : 'Light';
-      btn!.setAttribute('aria-pressed', String(theme === 'dark'));
-      btn!.classList.toggle('theme-toggle--dark', theme === 'dark');
+      const isDark = theme === 'dark';
+      label!.textContent = isDark ? 'Dark' : 'Light';
+      btn!.setAttribute('aria-pressed', String(isDark));
+      btn!.classList.toggle('theme-toggle--dark', isDark);
+      if (iconEl) iconEl.innerHTML = isDark ? moonPath : sunPath;
+      if (liveRegion) liveRegion.textContent = `${isDark ? 'Dark' : 'Light'} mode active`;
     }
 
     update(current);

package/src/css/button.module.css

@@ -9,15 +9,31 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--spacing-8);
   cursor: pointer;
   border: none;
-  border-radius: var(--spacing-4);
+  border-radius: var(--border-radius-medium);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-300);
   line-height: var(--font-line-height-none);
+  letter-spacing: var(--font-letter-spacing-wide);
   text-decoration: none;
   white-space: nowrap;
-  transition: opacity 0.15s ease;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    opacity 0.15s ease;
+}
+
+/* --- Structure: focus ring --- */
+.button:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--color-background-primary),
+    0 0 0 4px var(--color-primary);
 }
 
 /* --- Structure: size modifiers --- */
@@ -25,6 +41,7 @@
 .button--small {
   padding: var(--spacing-4) var(--spacing-12);
   font-size: var(--font-size-200);
+  border-radius: var(--border-radius-small);
 }
 
 .button--md,
@@ -37,49 +54,67 @@
 .button--large {
   padding: var(--spacing-12) var(--spacing-32);
   font-size: var(--font-size-400);
+  border-radius: var(--border-radius-large);
 }
 
 /* --- Skin: variant modifiers --- */
 .button--primary {
-  background-color: var(--color-primary);
-  color: var(--color-text-inverse);
+  --button-primary-color-background: var(--color-primary);
+  --button-primary-color-text: var(--color-text-inverse);
+  background-color: var(--button-primary-color-background);
+  color: var(--button-primary-color-text);
   border: 1px solid transparent;
 }
 
 .button--primary:hover:not(.button--disabled) {
-  opacity: 0.88;
+  box-shadow: var(--shadow-card-hover);
+  opacity: 0.92;
 }
 
 .button--secondary,
 .button--outline {
-  background-color: transparent;
-  color: var(--color-primary);
-  border: 1px solid var(--color-primary);
+  --button-secondary-color-background: transparent;
+  --button-secondary-color-text: var(--color-primary);
+  --button-secondary-color-border: var(--color-primary);
+  background-color: var(--button-secondary-color-background);
+  color: var(--button-secondary-color-text);
+  border: 1px solid var(--button-secondary-color-border);
 }
 
 .button--secondary:hover:not(.button--disabled),
 .button--outline:hover:not(.button--disabled) {
   background-color: var(--color-background-secondary);
+  box-shadow: var(--shadow-subtle);
 }
 
+/* Success button: uses text-primary for text to meet WCAG AA 4.5:1
+   Light: #22c55e bg + #111827 text = 7.79:1 ✅
+   Dark:  #14532d bg + #ffffff text = 9.11:1 ✅ */
+
 .button--success {
-  background-color: var(--color-success);
-  color: var(--color-text-inverse);
+  --button-success-color-background: var(--color-success);
+  --button-success-color-text: var(--color-text-primary);
+  background-color: var(--button-success-color-background);
+  color: var(--button-success-color-text);
   border: 1px solid transparent;
 }
 
 .button--success:hover:not(.button--disabled) {
-  opacity: 0.88;
+  box-shadow: var(--shadow-card-hover);
+  opacity: 0.92;
 }
 
 .button--ghost {
-  background-color: transparent;
-  color: var(--color-text-primary);
+  --button-ghost-color-background: transparent;
+  --button-ghost-color-text: var(--color-text-primary);
+  background-color: var(--button-ghost-color-background);
+  color: var(--button-ghost-color-text);
   border: 1px solid transparent;
 }
 
 .button--ghost:hover:not(.button--disabled) {
   background-color: var(--color-background-secondary);
+  border-color: var(--color-background-secondary);
 }
 
 /* --- Skin: state modifier --- */
@@ -87,4 +122,4 @@
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
-}
+}

package/src/css/card.module.css

@@ -20,11 +20,13 @@
 
 /* --- Skin: elevation modifiers --- */
 
-/* TODO: Propose --shadow-raised token to the design-tokens package. */
+/* TODO(design-system): needs token --shadow-raised (suggest 0 2px 8px rgba(0,0,0,0.12)) */
 .card--raised {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
 
+/* TODO(design-system): needs token --color-border (suggest var(--color-background-secondary)) */
 .card--flat {
   box-shadow: none;
+  border: 1px solid var(--color-background-secondary);
 }

package/src/css/tag.module.css

@@ -8,7 +8,7 @@
 .tag {
   display: inline-flex;
   align-items: center;
-  border-radius: var(--spacing-4);
+  border-radius: var(--spacing-12);
   padding: var(--spacing-4) var(--spacing-8);
   font-family: var(--font-family-base);
   font-size: var(--font-size-100);
@@ -18,16 +18,30 @@
 
 /* --- Skin: variant modifiers --- */
 .tag--default {
-  background-color: var(--color-background-secondary);
-  color: var(--color-text-primary);
+  --tag-default-color-background: var(--color-background-secondary);
+  --tag-default-color-text: var(--color-text-primary);
+  background-color: var(--tag-default-color-background);
+  color: var(--tag-default-color-text);
 }
 
 .tag--success {
-  background-color: var(--color-success);
-  color: var(--color-text-inverse);
+  --tag-success-color-background: var(--color-success);
+  --tag-success-color-text: var(--color-text-inverse);
+  background-color: var(--tag-success-color-background);
+  color: var(--tag-success-color-text);
 }
 
 .tag--danger {
-  background-color: var(--color-danger);
-  color: var(--color-text-inverse);
+  --tag-danger-color-background: var(--color-danger);
+  --tag-danger-color-text: var(--color-text-inverse);
+  background-color: var(--tag-danger-color-background);
+  color: var(--tag-danger-color-text);
+}
+
+/* TODO(design-system): needs token --color-warning (suggest amber-600 #d97706 for light, amber-900 #78350f for dark) */
+.tag--warning {
+  --tag-warning-color-background: #d97706;
+  --tag-warning-color-text: var(--color-text-inverse);
+  background-color: var(--tag-warning-color-background);
+  color: var(--tag-warning-color-text);
 }