@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

package/src/lib/styles/components.scss

@@ -0,0 +1,15 @@
+@use '../components/Layout/Card/Card.scss';
+@use '../components/Info/Calendar/Calendar.scss';
+@use '../components/Form/UtilityButton/UtilityButton.scss';
+@use '../components/Form/Button/Button.scss';
+@use '../components/Form/InputEnclosure/InputEnclosure.scss';
+@use '../components/Form/TextInput/TextInput.scss';
+@use '../components/Form/Label/Label.scss';
+@use '../components/Form/FormField/FormField.scss';
+@use '../components/Form/CheckEnclosure/CheckEnclosure.scss';
+@use '../components/Form/Checkbox/Checkbox.scss';
+@use '../components/Form/RadioGroup/RadioGroup.scss';
+@use '../components/Form/RadioGroup/Radio/Radio.scss';
+@use '../components/Form/Switch/Switch.scss';
+@use '../components/Form/Select/Select.scss';
+@use '../components/Form/DatePicker/DatePicker.scss';

package/src/lib/styles/global/_breakpoints.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+
+$breakpoints-default: (
+  sm: 40rem,
+  md: 48rem,
+  lg: 64rem,
+  xl: 80rem,
+  xxl: 96rem,
+);
+
+$breakpoints: () !default;
+
+$breakpoints: map.merge($breakpoints-default, $breakpoints);
+
+@function breakpoint($key) {
+  @if not map.has-key($breakpoints, $key) {
+    @error "Invalid breakpoint: #{$key}";
+  }
+  @return map.get($breakpoints, $key);
+}
+
+@mixin up($key) {
+  @media (min-width: breakpoint($key)) {
+    @content;
+  }
+}
+
+@mixin down($key) {
+  @media (max-width: breakpoint($key)) {
+    @content;
+  }
+}
+
+@mixin between($min, $max) {
+  @media (min-width: breakpoint($min)) and (max-width: breakpoint($max)) {
+    @content;
+  }
+}

package/src/lib/styles/global/index.scss

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

package/src/lib/styles/scss/mixins/_button-color.scss

@@ -0,0 +1,140 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+
+// ======================================================
+// 1. Token Maps (Defined first to avoid Undefined Variable errors)
+// ======================================================
+
+$dodo-ui-button-scale-light: (
+  outline: 400,
+  text-bg: 100,
+  text-hover: 200,
+  text-active: 300,
+  solid-bg: 500,
+  solid-hover: 600,
+  solid-active: 700,
+);
+
+$dodo-ui-button-scale-dark: (
+  outline: (
+    300,
+    90%,
+    #fff,
+  ),
+  text-bg: (
+    50,
+    90%,
+    #fff,
+  ),
+  text-hover: (
+    100,
+    90%,
+    #fff,
+  ),
+  text-active: (
+    200,
+    90%,
+    #fff,
+  ),
+  solid-bg: 400,
+  solid-hover: 300,
+  solid-active: 200,
+);
+
+// ======================================================
+// 2. Helpers
+// ======================================================
+
+@function _dodo-ui-resolve-color($color-name, $value) {
+  @if meta.type-of($value) == list {
+    $shade: list.nth($value, 1);
+    $mix: list.nth($value, 2);
+    $mix-color: list.nth($value, 3);
+
+    @return color-mix(in oklab, var(--dodo-color-#{$color-name}-#{$shade}) #{$mix}, #{$mix-color});
+  }
+
+  @return var(--dodo-color-#{$color-name}-#{$value});
+}
+
+// ======================================================
+// 3. Mixins
+// ======================================================
+
+@mixin generate-dodo-ui-button-colors($color-name, $mode: light) {
+  // Fix for Deprecation Warning [if-function] and Undefined Variable
+  $scale: null;
+  @if $mode == dark {
+    $scale: $dodo-ui-button-scale-dark;
+  } @else {
+    $scale: $dodo-ui-button-scale-light;
+  }
+
+  --dodo-ui-Button-outline-#{$color-name}: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline)
+    )};
+
+  --dodo-ui-Button-text-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-bg)
+    )};
+  --dodo-ui-Button-text-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-hover)
+    )};
+  --dodo-ui-Button-text-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-active)
+    )};
+
+  --dodo-ui-Button-solid-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-bg)
+    )};
+  --dodo-ui-Button-solid-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-hover)
+    )};
+  --dodo-ui-Button-solid-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-active)
+    )};
+}
+
+@mixin generate-dodo-ui-button-color($theme) {
+  &--#{$theme} {
+    &.variant {
+      &--text {
+        color: var(--dodo-color-#{$theme}-800);
+        background-color: var(--dodo-ui-Button-text-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-Button-text-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-Button-text-#{$theme}-active-bg);
+        }
+
+        &.outline {
+          border-color: var(--dodo-ui-Button-outline-#{$theme});
+        }
+      }
+
+      &--solid {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-Button-solid-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}

package/src/lib/styles/scss/mixins/_card-color.scss

@@ -0,0 +1,146 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+
+// ======================================================
+// 1. Token Maps (Defined first to avoid Undefined Variable errors)
+// ======================================================
+
+$dodo-ui-card-scale-light: (
+  outline: 400,
+  text-bg: 100,
+  text-hover: 200,
+  text-active: 300,
+  solid-bg: 500,
+  solid-hover: 600,
+  solid-active: 700,
+);
+
+$dodo-ui-card-scale-dark: (
+  outline: (
+    300,
+    90%,
+    #fff,
+  ),
+  text-bg: (
+    50,
+    90%,
+    #fff,
+  ),
+  text-hover: (
+    100,
+    90%,
+    #fff,
+  ),
+  text-active: (
+    200,
+    90%,
+    #fff,
+  ),
+  solid-bg: 400,
+  solid-hover: 300,
+  solid-active: 200,
+);
+
+// ======================================================
+// 2. Helpers
+// ======================================================
+
+@function _dodo-ui-resolve-color($color-name, $value) {
+  @if meta.type-of($value) == list {
+    $shade: list.nth($value, 1);
+    $mix: list.nth($value, 2);
+    $mix-color: list.nth($value, 3);
+
+    @return color-mix(in oklab, var(--dodo-color-#{$color-name}-#{$shade}) #{$mix}, #{$mix-color});
+  }
+
+  @return var(--dodo-color-#{$color-name}-#{$value});
+}
+
+// ======================================================
+// 3. Mixins
+// ======================================================
+
+@mixin generate-dodo-ui-card-colors($color-name, $mode: light) {
+  // Fix for Deprecation Warning [if-function] and Undefined Variable
+  $scale: null;
+  @if $mode == dark {
+    $scale: $dodo-ui-card-scale-dark;
+  } @else {
+    $scale: $dodo-ui-card-scale-light;
+  }
+
+  --dodo-ui-Card-outline-#{$color-name}: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline)
+    )};
+
+  --dodo-ui-Card-text-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-bg)
+    )};
+  --dodo-ui-Card-text-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-hover)
+    )};
+  --dodo-ui-Card-text-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-active)
+    )};
+
+  --dodo-ui-Card-solid-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-bg)
+    )};
+  --dodo-ui-Card-solid-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-hover)
+    )};
+  --dodo-ui-Card-solid-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-active)
+    )};
+}
+
+@mixin generate-dodo-ui-card-color($theme) {
+  &--#{$theme} {
+    &.variant {
+      &--text {
+        background-color: var(--dodo-ui-Card-text-#{$theme}-bg);
+
+        &.outline {
+          border-color: var(--dodo-ui-Card-outline-#{$theme});
+        }
+      }
+
+      &--solid {
+        background-color: var(--dodo-ui-Card-solid-#{$theme}-bg);
+      }
+    }
+
+    &.active {
+      &.variant {
+        &--text {
+          &:hover {
+            background-color: var(--dodo-ui-Card-text-#{$theme}-hover-bg);
+          }
+
+          &:active {
+            background-color: var(--dodo-ui-Card-text-#{$theme}-active-bg);
+          }
+        }
+
+        &--solid {
+          &:hover {
+            background-color: var(--dodo-ui-Card-solid-#{$theme}-hover-bg);
+          }
+
+          &:active {
+            background-color: var(--dodo-ui-Card-solid-#{$theme}-active-bg);
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/styles/scss/mixins/_check-enclosure-colors.scss

@@ -0,0 +1,149 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+
+// ======================================================
+// 1. Token Maps (Defined first to avoid Undefined Variable errors)
+// ======================================================
+
+$dodo-ui-checkEnclosure-scale-light: (
+  outline: 300,
+  outline-checked: 500,
+  text-bg: 100,
+  text-active-bg: 200,
+  solid-bg: 500,
+);
+
+$dodo-ui-checkEnclosure-scale-dark: (
+  outline: (
+    300,
+    90%,
+    #fff,
+  ),
+  outline-checked: (
+    500,
+    90%,
+    #fff,
+  ),
+  text-bg: (
+    50,
+    90%,
+    #fff,
+  ),
+  text-active-bg: (
+    100,
+    90%,
+    #fff,
+  ),
+  solid-bg: 400,
+);
+
+// ======================================================
+// 2. Helpers
+// ======================================================
+
+@function _dodo-ui-resolve-color($color-name, $value) {
+  @if meta.type-of($value) == list {
+    $shade: list.nth($value, 1);
+    $mix: list.nth($value, 2);
+    $mix-color: list.nth($value, 3);
+
+    @return color-mix(in oklab, var(--dodo-color-#{$color-name}-#{$shade}) #{$mix}, #{$mix-color});
+  }
+
+  @return var(--dodo-color-#{$color-name}-#{$value});
+}
+
+// ======================================================
+// 3. Mixins
+// ======================================================
+
+@mixin generate-dodo-ui-checkEnclosure-colors($color-name, $mode: light) {
+  // Fix for Deprecation Warning [if-function] and Undefined Variable
+  $scale: null;
+  @if $mode == dark {
+    $scale: $dodo-ui-checkEnclosure-scale-dark;
+  } @else {
+    $scale: $dodo-ui-checkEnclosure-scale-light;
+  }
+
+  --dodo-ui-CheckEnclosure-outline-#{$color-name}: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline)
+    )};
+
+  --dodo-ui-CheckEnclosure-outline-#{$color-name}-checked: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline-checked)
+    )};
+
+  --dodo-ui-CheckEnclosure-text-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-bg)
+    )};
+
+  --dodo-ui-CheckEnclosure-text-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-active-bg)
+    )};
+
+  --dodo-ui-CheckEnclosure-solid-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-bg)
+    )};
+}
+
+@mixin generate-dodo-ui-checkEnclosure-color($theme) {
+  &--#{$theme} {
+    &.outline {
+      border-color: var(--dodo-ui-CheckEnclosure-outline-#{$theme});
+    }
+
+    &.variant {
+      &--text {
+        color: var(--dodo-color-#{$theme}-800);
+        background-color: var(--dodo-ui-CheckEnclosure-text-#{$theme}-bg);
+
+        .CheckThumbInternal {
+          background-color: var(--dodo-color-#{$theme}-600);
+        }
+
+        &[data-state='checked'] {
+          border-color: var(--dodo-ui-CheckEnclosure-outline-#{$theme}-checked);
+
+          .CheckThumbInternal {
+            background-color: var(--dodo-color-#{$theme}-700);
+          }
+        }
+      }
+
+      &--solid {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-CheckEnclosure-text-#{$theme}-bg);
+
+        .CheckThumbInternal {
+          background-color: var(--dodo-color-#{$theme}-600);
+        }
+
+        &[data-state='checked'] {
+          background-color: var(--dodo-ui-CheckEnclosure-solid-#{$theme}-bg);
+          border-color: transparent;
+
+          .CheckThumbInternal {
+            background-color: var(--dodo-color-constant-white);
+          }
+        }
+      }
+    }
+
+    &.CheckEnclosureBackdrop {
+      &.variant {
+        &--text {
+          &[data-state='checked'] {
+            background-color: var(--dodo-ui-CheckEnclosure-text-#{$theme}-active-bg);
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/styles/scss/mixins/_utility-button-color.scss

@@ -0,0 +1,105 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+
+// ======================================================
+// 1. Token Maps (Defined first to avoid Undefined Variable errors)
+// ======================================================
+
+$dodo-ui-utility-button-scale-light: (
+  outline: 400,
+  text-bg: 100,
+  text-hover: 200,
+  text-active: 300,
+);
+
+$dodo-ui-utility-button-scale-dark: (
+  outline: (
+    300,
+    90%,
+    #fff,
+  ),
+  text-bg: (
+    50,
+    90%,
+    #fff,
+  ),
+  text-hover: (
+    100,
+    90%,
+    #fff,
+  ),
+  text-active: (
+    200,
+    90%,
+    #fff,
+  ),
+);
+
+// ======================================================
+// 2. Helpers
+// ======================================================
+
+@function _dodo-ui-resolve-color($color-name, $value) {
+  @if meta.type-of($value) == list {
+    $shade: list.nth($value, 1);
+    $mix: list.nth($value, 2);
+    $mix-color: list.nth($value, 3);
+
+    @return color-mix(in oklab, var(--dodo-color-#{$color-name}-#{$shade}) #{$mix}, #{$mix-color});
+  }
+
+  @return var(--dodo-color-#{$color-name}-#{$value});
+}
+
+// ======================================================
+// 3. Mixins
+// ======================================================
+
+@mixin generate-dodo-ui-utility-button-colors($color-name, $mode: light) {
+  // Fix for Deprecation Warning [if-function] and Undefined Variable
+  $scale: null;
+  @if $mode == dark {
+    $scale: $dodo-ui-utility-button-scale-dark;
+  } @else {
+    $scale: $dodo-ui-utility-button-scale-light;
+  }
+
+  --dodo-ui-UtilityButton-outline-#{$color-name}: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline)
+    )};
+  --dodo-ui-UtilityButton-text-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-bg)
+    )};
+  --dodo-ui-UtilityButton-text-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-hover)
+    )};
+  --dodo-ui-UtilityButton-text-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-active)
+    )};
+}
+
+@mixin generate-dodo-ui-utility-button-color($theme) {
+  &--#{$theme} {
+    color: var(--dodo-color-neutral-800);
+    background-color: transparent;
+
+    &:hover {
+      color: var(--dodo-color-#{$theme}-800);
+      background-color: var(--dodo-ui-UtilityButton-text-#{$theme}-hover-bg);
+    }
+
+    &:active {
+      color: var(--dodo-color-#{$theme}-800);
+      background-color: var(--dodo-ui-UtilityButton-text-#{$theme}-active-bg);
+    }
+
+    &.outline {
+      border-color: var(--dodo-ui-UtilityButton-outline-#{$theme});
+    }
+  }
+}

package/src/lib/test/setup.ts

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom/vitest';
+import { vi } from 'vitest';
+
+// mock matchMedia globally
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  })),
+});