npm - @flightlesslabs/dodo-ui - Versions diffs - 1.0.0--beta-2 → 1.0.0--beta-4 - Mend

@flightlesslabs/dodo-ui 1.0.0--beta-2 → 1.0.0--beta-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 # Dodo Ui
-An open-source, opinionated UI framework for Svelte.
+Opinionated UI framework for Svelte, based on [Bits UI](https://bits-ui.com/)
 [Github](https://github.com/flightlesslabs/dodo-ui) | [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)

package/dist/Home.mdx CHANGED Viewed

@@ -10,7 +10,7 @@ import item from '../../package.json?raw';
 <h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
 <h3 style={{ fontWeight: 400 }}>
-  An open-source, opinionated UI framework for Svelte. based on [Bits UI](https://bits-ui.com/)
+  Opinionated UI framework for Svelte, based on [Bits UI](https://bits-ui.com/)
 </h3>
 ### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
@@ -30,7 +30,7 @@ pnpm add bits-ui @flightlesslabs/dodo-ui
 `}
 />
-We are using bits-ui@{JSON.parse(item).devDependencies['bits-ui']} internally
+We are using **bits-ui@{JSON.parse(item).devDependencies['bits-ui']}** internally
 ## Add css
@@ -41,6 +41,7 @@ Add global css in your `+layout.svelte` file
   language="js"
   code={`
 import '@flightlesslabs/dodo-ui/styles/global.css';
+import '@flightlesslabs/dodo-ui/styles/components.css';
 `}
 />

package/dist/components/Form/Button/Button.svelte CHANGED Viewed

@@ -1,8 +1,7 @@
 <script lang="ts" module>export {};
 </script>
-<script lang="ts">import './Button.scss';
-import { Button as BitsUiButton } from 'bits-ui';
+<script lang="ts">import { Button as BitsUiButton } from 'bits-ui';
 /**
  * Button component runtime props.
  *

package/dist/components/Form/Button/Button.svelte.d.ts CHANGED Viewed

@@ -66,7 +66,6 @@ export type ButtonAsAnchorProps = ButtonBaseProps & Omit<HTMLAnchorAttributes, '
  * - When `href` is absent, button props are enabled and anchor-only props are disabled.
  */
 export type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
-import './Button.scss';
 import type { ComponentSize } from '../../../attributes/size.js';
 import type { ComponentColor } from '../../../attributes/color.js';
 import type { ComponentRoundness } from '../../../attributes/roundness.js';

package/dist/components/Form/InputEnclosure/InputEnclosure.svelte CHANGED Viewed

@@ -1,8 +1,7 @@
 <script lang="ts" module>export {};
 </script>
-<script lang="ts">import './InputEnclosure.scss';
-import InputAffix from './InputAffix.svelte';
+<script lang="ts">import InputAffix from './InputAffix.svelte';
 /**
  * InputEnclosure component runtime props.
  *

package/dist/components/Form/InputEnclosure/InputEnclosure.svelte.d.ts CHANGED Viewed

@@ -56,7 +56,6 @@ interface InputEnclosureBaseProps {
  * Inherits all native HTML div attributes (e.g. id, style, data-*, aria-*).
  */
 export type InputEnclosureProps = InputEnclosureBaseProps & HTMLAttributes<HTMLDivElement>;
-import './InputEnclosure.scss';
 import type { ComponentSize } from '../../../attributes/size.js';
 import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
 declare const InputEnclosure: import("svelte").Component<InputEnclosureProps, {}, "ref">;

package/dist/components/Form/TextInput/TextInput.svelte CHANGED Viewed

@@ -1,8 +1,7 @@
 <script lang="ts" module>export {};
 </script>
-<script lang="ts">import './TextInput.scss';
-import InputEnclosure from '../InputEnclosure/InputEnclosure.svelte';
+<script lang="ts">import InputEnclosure from '../InputEnclosure/InputEnclosure.svelte';
 let { ref = $bindable(), size = 'normal', roundness = 1, outline = true, class: className = '', disabled = false, error = false, focused: forcedFocused = false, before, after, onfocus, onblur, ...restProps } = $props();
 /**
  * Local focus state used to drive InputEnclosure focus styling.

package/dist/components/Form/TextInput/TextInput.svelte.d.ts CHANGED Viewed

@@ -59,7 +59,6 @@ interface TextInputBaseProps {
  * Inherits all native HTML input attributes (placeholder, value, name, etc.).
  */
 export type TextInputProps = TextInputBaseProps & Omit<HTMLInputAttributes, 'size' | 'children'>;
-import './TextInput.scss';
 import type { ComponentSize } from '../../../attributes/size.js';
 import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
 declare const TextInput: import("svelte").Component<TextInputProps, {}, "ref">;

package/dist/index.d.ts CHANGED Viewed

@@ -1,15 +1,28 @@
 /**
  * Button component and related prop types.
  */
-export { Button } from './components/Form/index.js';
-export type { ButtonAsButtonProps, ButtonAsAnchorProps, ButtonProps, } from './components/Form/index.js';
+export { default as Button, type ButtonAsButtonProps, type ButtonAsAnchorProps, type ButtonProps, } from './components/Form/Button/Button.svelte';
 /**
  * TextInput component and related types/events.
  */
-export { TextInput } from './components/Form/index.js';
-export type { TextInputEvent, TextInputFocusEvent, TextInputProps, } from './components/Form/index.js';
+export { default as TextInput, type TextInputEvent, type TextInputFocusEvent, type TextInputProps, } from './components/Form/TextInput/TextInput.svelte';
 /**
  * InputEnclosure component and related prop types.
  */
-export { InputEnclosure } from './components/Form/index.js';
-export type { InputEnclosureProps } from './components/Form/index.js';
+export { default as InputEnclosure, type InputEnclosureProps, } from './components/Form/InputEnclosure/InputEnclosure.svelte';
+/**
+ * color attribute related prop types.
+ */
+export { COMPONENT_COLOR, componentColorOptions, componentColorPriorityOptions, componentColorSeverityOptions, type ComponentColorPriority, type ComponentColorSeverity, type ComponentColor, } from './attributes/color.js';
+/**
+ * roundness attribute related prop types.
+ */
+export { COMPONENT_ROUNDNESS, componentRoundnessNumericalOptions, componenRoundnessShapeOptions, componentRoundnessOptions, type ComponentRoundnessNumerical, type ComponentRoundnessShape, type ComponentRoundness, } from './attributes/roundness.js';
+/**
+ * size attribute related prop types.
+ */
+export { COMPONENT_SIZE, componentSizeOptions, type ComponentSize } from './attributes/size.js';
+/**
+ * variant attribute related prop types.
+ */
+export { COMPONENT_VARIANT, componentVariantOptions, type ComponentVariant, } from './attributes/variant.js';

package/dist/index.js CHANGED Viewed

@@ -4,12 +4,31 @@
 /**
  * Button component and related prop types.
  */
-export { Button } from './components/Form/index.js';
+export { default as Button, } from './components/Form/Button/Button.svelte';
 /**
  * TextInput component and related types/events.
  */
-export { TextInput } from './components/Form/index.js';
+export { default as TextInput, } from './components/Form/TextInput/TextInput.svelte';
 /**
  * InputEnclosure component and related prop types.
  */
-export { InputEnclosure } from './components/Form/index.js';
+export { default as InputEnclosure, } from './components/Form/InputEnclosure/InputEnclosure.svelte';
+// =====================================================
+// attributes – Public API
+// =====================================================
+/**
+ * color attribute related prop types.
+ */
+export { COMPONENT_COLOR, componentColorOptions, componentColorPriorityOptions, componentColorSeverityOptions, } from './attributes/color.js';
+/**
+ * roundness attribute related prop types.
+ */
+export { COMPONENT_ROUNDNESS, componentRoundnessNumericalOptions, componenRoundnessShapeOptions, componentRoundnessOptions, } from './attributes/roundness.js';
+/**
+ * size attribute related prop types.
+ */
+export { COMPONENT_SIZE, componentSizeOptions } from './attributes/size.js';
+/**
+ * variant attribute related prop types.
+ */
+export { COMPONENT_VARIANT, componentVariantOptions, } from './attributes/variant.js';

package/dist/styles/components.css ADDED Viewed

@@ -0,0 +1,398 @@
+:root {
+  --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-outline-neutral: var(--dodo-color-neutral-400);
+  --dodo-ui-Button-text-neutral-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Button-text-neutral-hover-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-text-neutral-active-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-Button-solid-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-Button-solid-neutral-hover-bg: var(--dodo-color-neutral-600);
+  --dodo-ui-Button-solid-neutral-active-bg: var(--dodo-color-neutral-700);
+  --dodo-ui-Button-outline-primary: var(--dodo-color-primary-400);
+  --dodo-ui-Button-text-primary-bg: var(--dodo-color-primary-100);
+  --dodo-ui-Button-text-primary-hover-bg: var(--dodo-color-primary-200);
+  --dodo-ui-Button-text-primary-active-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-600);
+  --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-700);
+  --dodo-ui-Button-outline-secondary: var(--dodo-color-secondary-400);
+  --dodo-ui-Button-text-secondary-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-Button-text-secondary-hover-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-text-secondary-active-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-600);
+  --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-700);
+  --dodo-ui-Button-outline-safe: var(--dodo-color-safe-400);
+  --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-100);
+  --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-200);
+  --dodo-ui-Button-text-safe-active-bg: var(--dodo-color-safe-300);
+  --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-600);
+  --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-700);
+  --dodo-ui-Button-outline-warning: var(--dodo-color-warning-400);
+  --dodo-ui-Button-text-warning-bg: var(--dodo-color-warning-100);
+  --dodo-ui-Button-text-warning-hover-bg: var(--dodo-color-warning-200);
+  --dodo-ui-Button-text-warning-active-bg: var(--dodo-color-warning-300);
+  --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-600);
+  --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-700);
+  --dodo-ui-Button-outline-danger: var(--dodo-color-danger-400);
+  --dodo-ui-Button-text-danger-bg: var(--dodo-color-danger-100);
+  --dodo-ui-Button-text-danger-hover-bg: var(--dodo-color-danger-200);
+  --dodo-ui-Button-text-danger-active-bg: var(--dodo-color-danger-300);
+  --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-500);
+  --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-600);
+  --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-700);
+}
+.dodo-theme--dark {
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-500);
+  --dodo-ui-Button-outline-neutral: color-mix(in oklab, var(--dodo-color-neutral-300) 90%, #fff);
+  --dodo-ui-Button-text-neutral-bg: color-mix(in oklab, var(--dodo-color-neutral-50) 90%, #fff);
+  --dodo-ui-Button-text-neutral-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-100) 90%, #fff);
+  --dodo-ui-Button-text-neutral-active-bg: color-mix(in oklab, var(--dodo-color-neutral-200) 90%, #fff);
+  --dodo-ui-Button-solid-neutral-bg: var(--dodo-color-neutral-400);
+  --dodo-ui-Button-solid-neutral-hover-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-Button-solid-neutral-active-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-outline-primary: color-mix(in oklab, var(--dodo-color-primary-300) 90%, #fff);
+  --dodo-ui-Button-text-primary-bg: color-mix(in oklab, var(--dodo-color-primary-50) 90%, #fff);
+  --dodo-ui-Button-text-primary-hover-bg: color-mix(in oklab, var(--dodo-color-primary-100) 90%, #fff);
+  --dodo-ui-Button-text-primary-active-bg: color-mix(in oklab, var(--dodo-color-primary-200) 90%, #fff);
+  --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-400);
+  --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-200);
+  --dodo-ui-Button-outline-secondary: color-mix(in oklab, var(--dodo-color-secondary-300) 90%, #fff);
+  --dodo-ui-Button-text-secondary-bg: color-mix(in oklab, var(--dodo-color-secondary-50) 90%, #fff);
+  --dodo-ui-Button-text-secondary-hover-bg: color-mix(in oklab, var(--dodo-color-secondary-100) 90%, #fff);
+  --dodo-ui-Button-text-secondary-active-bg: color-mix(in oklab, var(--dodo-color-secondary-200) 90%, #fff);
+  --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-400);
+  --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-outline-safe: color-mix(in oklab, var(--dodo-color-safe-300) 90%, #fff);
+  --dodo-ui-Button-text-safe-bg: color-mix(in oklab, var(--dodo-color-safe-50) 90%, #fff);
+  --dodo-ui-Button-text-safe-hover-bg: color-mix(in oklab, var(--dodo-color-safe-100) 90%, #fff);
+  --dodo-ui-Button-text-safe-active-bg: color-mix(in oklab, var(--dodo-color-safe-200) 90%, #fff);
+  --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-400);
+  --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-300);
+  --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-200);
+  --dodo-ui-Button-outline-warning: color-mix(in oklab, var(--dodo-color-warning-300) 90%, #fff);
+  --dodo-ui-Button-text-warning-bg: color-mix(in oklab, var(--dodo-color-warning-50) 90%, #fff);
+  --dodo-ui-Button-text-warning-hover-bg: color-mix(in oklab, var(--dodo-color-warning-100) 90%, #fff);
+  --dodo-ui-Button-text-warning-active-bg: color-mix(in oklab, var(--dodo-color-warning-200) 90%, #fff);
+  --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-400);
+  --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-300);
+  --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-200);
+  --dodo-ui-Button-outline-danger: color-mix(in oklab, var(--dodo-color-danger-300) 90%, #fff);
+  --dodo-ui-Button-text-danger-bg: color-mix(in oklab, var(--dodo-color-danger-50) 90%, #fff);
+  --dodo-ui-Button-text-danger-hover-bg: color-mix(in oklab, var(--dodo-color-danger-100) 90%, #fff);
+  --dodo-ui-Button-text-danger-active-bg: color-mix(in oklab, var(--dodo-color-danger-200) 90%, #fff);
+  --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-400);
+  --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-300);
+  --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-200);
+}
+.dodo-ui-Button {
+  cursor: pointer;
+  transition: background-color 70ms, color 70ms, border-color 70ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: transparent;
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  letter-spacing: 0.3px;
+}
+.dodo-ui-Button.size--normal {
+  height: var(--dodo-ui-element-height-normal);
+  font-size: 1rem;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
+  min-width: 45px;
+}
+.dodo-ui-Button.size--small {
+  height: var(--dodo-ui-element-height-small);
+  padding: 0 var(--dodo-ui-space);
+  font-size: 0.9rem;
+  min-width: 35px;
+}
+.dodo-ui-Button.size--large {
+  height: var(--dodo-ui-element-height-large);
+  font-size: 1.1rem;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
+  min-width: 85px;
+}
+.dodo-ui-Button.roundness--1 {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-Button.roundness--2 {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-Button.roundness--3 {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-Button.roundness--pill {
+  border-radius: 999px;
+}
+.dodo-ui-Button.roundness--full {
+  border-radius: 50%;
+}
+.dodo-ui-Button.color--neutral.variant--text {
+  color: var(--dodo-color-neutral-800);
+  background-color: var(--dodo-ui-Button-text-neutral-bg);
+}
+.dodo-ui-Button.color--neutral.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-neutral-hover-bg);
+}
+.dodo-ui-Button.color--neutral.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-neutral-active-bg);
+}
+.dodo-ui-Button.color--neutral.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-neutral);
+}
+.dodo-ui-Button.color--neutral.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-neutral-bg);
+}
+.dodo-ui-Button.color--neutral.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-neutral-hover-bg);
+}
+.dodo-ui-Button.color--neutral.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-neutral-active-bg);
+}
+.dodo-ui-Button.color--primary.variant--text {
+  color: var(--dodo-color-primary-800);
+  background-color: var(--dodo-ui-Button-text-primary-bg);
+}
+.dodo-ui-Button.color--primary.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-primary-hover-bg);
+}
+.dodo-ui-Button.color--primary.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-primary-active-bg);
+}
+.dodo-ui-Button.color--primary.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-primary);
+}
+.dodo-ui-Button.color--primary.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-primary-bg);
+}
+.dodo-ui-Button.color--primary.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-primary-hover-bg);
+}
+.dodo-ui-Button.color--primary.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-primary-active-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text {
+  color: var(--dodo-color-secondary-800);
+  background-color: var(--dodo-ui-Button-text-secondary-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-secondary-hover-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-secondary-active-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-secondary);
+}
+.dodo-ui-Button.color--secondary.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-secondary-bg);
+}
+.dodo-ui-Button.color--secondary.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-secondary-hover-bg);
+}
+.dodo-ui-Button.color--secondary.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-secondary-active-bg);
+}
+.dodo-ui-Button.color--safe.variant--text {
+  color: var(--dodo-color-safe-800);
+  background-color: var(--dodo-ui-Button-text-safe-bg);
+}
+.dodo-ui-Button.color--safe.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-safe-hover-bg);
+}
+.dodo-ui-Button.color--safe.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-safe-active-bg);
+}
+.dodo-ui-Button.color--safe.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-safe);
+}
+.dodo-ui-Button.color--safe.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-safe-bg);
+}
+.dodo-ui-Button.color--safe.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-safe-hover-bg);
+}
+.dodo-ui-Button.color--safe.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-safe-active-bg);
+}
+.dodo-ui-Button.color--warning.variant--text {
+  color: var(--dodo-color-warning-800);
+  background-color: var(--dodo-ui-Button-text-warning-bg);
+}
+.dodo-ui-Button.color--warning.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-warning-hover-bg);
+}
+.dodo-ui-Button.color--warning.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-warning-active-bg);
+}
+.dodo-ui-Button.color--warning.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-warning);
+}
+.dodo-ui-Button.color--warning.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-warning-bg);
+}
+.dodo-ui-Button.color--warning.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-warning-hover-bg);
+}
+.dodo-ui-Button.color--warning.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-warning-active-bg);
+}
+.dodo-ui-Button.color--danger.variant--text {
+  color: var(--dodo-color-danger-800);
+  background-color: var(--dodo-ui-Button-text-danger-bg);
+}
+.dodo-ui-Button.color--danger.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-danger-hover-bg);
+}
+.dodo-ui-Button.color--danger.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-danger-active-bg);
+}
+.dodo-ui-Button.color--danger.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-danger);
+}
+.dodo-ui-Button.color--danger.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-danger-bg);
+}
+.dodo-ui-Button.color--danger.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-danger-hover-bg);
+}
+.dodo-ui-Button.color--danger.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-danger-active-bg);
+}
+.dodo-ui-Button[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.dodo-ui-Button[disabled].variant--text, .dodo-ui-Button[disabled].variant--solid {
+  background-color: var(--dodo-ui-Button-disabled-bg);
+  color: var(--dodo-ui-Button-disabled-color);
+}
+.dodo-ui-Button[disabled].variant--text.outline, .dodo-ui-Button[disabled].variant--solid.outline {
+  border-color: transparent;
+}
+.dodo-ui-Button.compact.size--normal, .dodo-ui-Button.compact.size--small, .dodo-ui-Button.compact.size--large {
+  min-width: initial;
+  padding: 0;
+}
+.dodo-ui-Button.compact.size--normal {
+  width: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-Button.compact.size--small {
+  width: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-Button.compact.size--large {
+  width: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-Button.fullWidth {
+  width: 100%;
+}
+:root {
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-500);
+  --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
+  --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
+  --dodo-ui-InputEnclosure-safe-border-color: var(--dodo-color-safe-500);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-200);
+}
+.dodo-theme--dark {
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-600);
+  --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
+  --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
+  --dodo-ui-InputEnclosure-safe-border-color: var(--dodo-color-safe-600);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-500);
+}
+.dodo-ui-InputEnclosure {
+  display: flex;
+  overflow: hidden;
+  color: var(--dodo-color-neutral-800);
+  transition: border-color 150ms, background-color 150ms, color 150ms;
+  border: 0;
+}
+.dodo-ui-InputEnclosure.outline {
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: var(--dodo-ui-InputEnclosure-border-color);
+}
+.dodo-ui-InputEnclosure.focused {
+  border-color: var(--dodo-ui-InputEnclosure-focus-border-color);
+}
+.dodo-ui-InputEnclosure.error {
+  border-color: var(--dodo-ui-InputEnclosure-error-border-color);
+}
+.dodo-ui-InputEnclosure.disabled {
+  cursor: not-allowed;
+  background-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+  color: var(--dodo-ui-InputEnclosure-disabled-color);
+  border-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+}
+.dodo-ui-InputEnclosure.size--small {
+  height: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-InputEnclosure.size--normal {
+  height: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-InputEnclosure.size--large {
+  height: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-InputEnclosure.roundness--1 {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-InputEnclosure.roundness--2 {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-InputEnclosure.roundness--3 {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-InputEnclosure.roundness--pill {
+  border-radius: 999px;
+}
+.dodo-ui-TextInput {
+  flex: 1;
+  border: 0;
+  outline: 0;
+  height: 100%;
+  background-color: transparent;
+  font-family: inherit;
+  color: inherit;
+  letter-spacing: 0.3px;
+  margin: 0;
+}
+.dodo-ui-TextInput.size--normal {
+  font-size: 1rem;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-TextInput.size--small {
+  padding: 0 var(--dodo-ui-space);
+  font-size: 0.9rem;
+}
+.dodo-ui-TextInput.size--large {
+  font-size: 1.1rem;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
+}
+/*# sourceMappingURL=components.css.map */

package/dist/styles/components.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sourceRoot":"","sources":["../../src/lib/components/Form/Button/Button.scss","../../src/lib/styles/scss/mixins/_button-color.scss","../../src/lib/components/Form/InputEnclosure/InputEnclosure.scss","../../src/lib/components/Form/TextInput/TextInput.scss"],"names":[],"mappings":"AAUA;EACE;EACA;EC6DA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;;;AD/EF;EACE;EACA;ECmDA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;;;ADtDF;EACE;EACA,YACE;EAGF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAME;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AASA;EACE,eA9DI;;AA6DN;EACE,eA9DI;;AA6DN;EACE,eA9DI;;AA6DN;EACE,eA9DI;;AA6DN;EACE,eA9DI;;AC0EN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA1BJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA1BJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA1BJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA1BJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA1BJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;ADpBR;EACE;EACA;;AAGE;EAEE;EACA;;AAEA;EACE;;AAWJ;EAGE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAQN;EACE;;;AE9JJ;EACE;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;;;AA4BF;EACE;EACA;EACA;EACA,YACE;EAGF;;AAEA;EACE;EACA;EACA;;AAOA;EACE,cA7BG;;AA4BL;EACE,cA7BG;;AAoCP;EACE;EACA;EACA;EACA;;AAQE;EACE,QA/DA;;AA8DF;EACE,QA/DA;;AA8DF;EACE,QA/DA;;AAyEF;EACE,eApEI;;AAmEN;EACE,eApEI;;AAmEN;EACE,eApEI;;AAmEN;EACE,eApEI;;;AC7BZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAME;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA","file":"components.css"}

package/dist/styles/components.scss ADDED Viewed

@@ -0,0 +1,3 @@
+@use '../components/Form/Button/Button.scss';
+@use '../components/Form/InputEnclosure/InputEnclosure.scss';
+@use '../components/Form/TextInput/TextInput.scss';

package/dist/styles/global/index.scss ADDED Viewed

@@ -0,0 +1,7 @@
+@forward '_minimal-reset.scss';
+@forward '_colors-base.scss';
+@forward '_colors.scss';
+@forward '_space.scss';
+@forward '_z-index.scss';
+@forward '_shadow.scss';
+@forward '_components.scss';