@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/CheckBox/index.css

@@ -2,7 +2,7 @@
 .lib-xplat-checkbox {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
   cursor: pointer;
   user-select: none;
   width: fit-content;
@@ -12,43 +12,30 @@
   pointer-events: none;
 }
 .lib-xplat-checkbox.sm > .checkbox {
-  width: 1rem;
-  height: 1rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-checkbox.md > .checkbox {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--spacing-space-5);
+  height: var(--spacing-space-5);
 }
 .lib-xplat-checkbox.lg > .checkbox {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-checkbox.sm > .label {
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 .lib-xplat-checkbox.lg > .label {
-  font-size: 1.125rem;
+  font-size: 18px;
 }
 .lib-xplat-checkbox > .checkbox {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
   transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
 }
-.lib-xplat-checkbox > .checkbox.unchecked {
-  border: 1px solid var(--xplat-neutral-400);
-}
-.lib-xplat-checkbox:hover .lib-xplat-checkbox > .checkbox.unchecked {
-  border-color: var(--xplat-neutral-600);
-  background-color: var(--xplat-neutral-100);
-}
-.lib-xplat-checkbox > .checkbox.checked {
-  background-color: var(--ds-color);
-}
-.lib-xplat-checkbox > .checkbox.checked:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 15%);
-}
 .lib-xplat-checkbox > .checkbox .check-icon {
   display: flex;
   align-items: center;
@@ -61,14 +48,50 @@
   opacity: 1;
   transform: scale(1);
 }
+.lib-xplat-checkbox > .checkbox.unchecked {
+  border: 1px solid var(--semantic-border-strong);
+}
+.lib-xplat-checkbox:hover > .checkbox.unchecked {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-checkbox.brand > .checkbox.checked {
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-checkbox.success > .checkbox.checked {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-checkbox.error > .checkbox.checked {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-checkbox.warning > .checkbox.checked {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-checkbox.info > .checkbox.checked {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-checkbox:hover.brand > .checkbox.checked {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-checkbox:hover.success > .checkbox.checked {
+  background-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-checkbox:hover.error > .checkbox.checked {
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-checkbox:hover.warning > .checkbox.checked {
+  background-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-checkbox:hover.info > .checkbox.checked {
+  background-color: var(--semantic-surface-info-strong);
+}
 .lib-xplat-checkbox > .checkbox.disabled {
   cursor: not-allowed;
-  background-color: var(--xplat-neutral-400) !important;
-  border-color: var(--xplat-neutral-400) !important;
+  background-color: var(--semantic-surface-neutral-disabled) !important;
+  border-color: var(--semantic-surface-neutral-disabled) !important;
 }
 .lib-xplat-checkbox > .label {
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
   font-weight: 400;
   line-height: 1em;
-  padding-top: 0.05rem;
+  padding-top: 1px;
 }

package/dist/components/CheckBox/index.d.cts

@@ -1,14 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 import 'react';
 
 type CheckBoxSize = "sm" | "md" | "lg";
-interface CheckBoxProps extends Omit<InputAttributes, "size">, ColorProps {
+type CheckBoxType = "brand" | "success" | "error" | "warning" | "info";
+interface CheckBoxProps extends Omit<InputAttributes, "size" | "className"> {
     label?: string;
-    className?: string;
     checked?: boolean;
     size?: CheckBoxSize;
+    type?: CheckBoxType;
 }
 declare const CheckBox: {
     (props: CheckBoxProps): react_jsx_runtime.JSX.Element;

package/dist/components/CheckBox/index.d.ts

@@ -1,14 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 import 'react';
 
 type CheckBoxSize = "sm" | "md" | "lg";
-interface CheckBoxProps extends Omit<InputAttributes, "size">, ColorProps {
+type CheckBoxType = "brand" | "success" | "error" | "warning" | "info";
+interface CheckBoxProps extends Omit<InputAttributes, "size" | "className"> {
     label?: string;
-    className?: string;
     checked?: boolean;
     size?: CheckBoxSize;
+    type?: CheckBoxType;
 }
 declare const CheckBox: {
     (props: CheckBoxProps): react_jsx_runtime.JSX.Element;