@hkdigital/lib-core 0.3.1

package/dist/themes/hkdev/components/buttons/button.css

@@ -0,0 +1,146 @@
+
+  [data-component='button'] {
+    /* ---- Core Button Variables ---- */
+
+    /* Size variables */
+    --btn-min-width: calc(150px * var(--scale-ui));
+    --btn-min-height: calc(40px * var(--scale-ui));
+
+    /* ---- Primary Button Variables ---- */
+    --btn-primary-bg: var(--color-primary-500);
+    --btn-primary-text: var(--color-primary-50);
+    --btn-primary-border: var(--color-primary-500);
+
+    --btn-primary-selected-bg: var(--color-primary-700);
+    --btn-primary-selected-text: var(--color-primary-50);
+    --btn-primary-selected-border: var(--color-primary-800);
+
+    --btn-primary-hover-bg: var(--color-primary-600);
+    --btn-primary-hover-border: var(--color-primary-600);
+    --btn-primary-focus-outline: var(--color-primary-800);
+
+    /* ---- Secondary Button Variables ---- */
+    --btn-secondary-bg: transparent;
+    --btn-secondary-text: var(--color-secondary-500);
+    --btn-secondary-border: var(--color-secondary-500);
+
+    --btn-secondary-selected-bg: var(--color-secondary-100);
+    --btn-secondary-selected-text: var(--color-secondary-800);
+    --btn-secondary-selected-border: var(--color-secondary-600);
+
+    --btn-secondary-hover-bg: var(--color-secondary-50);
+    --btn-secondary-hover-border: var(--color-secondary-500);
+    --btn-secondary-focus-outline: var(--color-secondary-800);
+
+    /* ---- State Variables ---- */
+    --btn-active-transform: scale(0.98);
+    --btn-active-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+
+    --btn-error-border: var(--color-error-500);
+    --btn-loading-opacity: 0.8;
+
+    /* Appearance variations */
+    --btn-border-width: 2px;
+    --btn-transition-duration: 150ms;
+    --btn-disabled-opacity: 0.6;
+    --btn-focus-ring-width: 3px;
+    --btn-focus-ring-opacity: 0.4;
+
+    /* Base styles */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    transition-property:
+      background-color, color, border-color, transform, box-shadow;
+    transition-duration: var(--btn-transition-duration);
+  }
+
+  /* Size variants */
+  /*[data-component="button"][data-size="sm"] {
+    @apply rounded-xs;
+    @apply py-8ut px-8ut;
+    @apply min-w-24ut min-h-24ut;
+  }*/
+
+  /*[data-component="button"][data-size="lg"] {
+    @apply rounded-sm;
+    @apply py-16ut px-36ut;
+    @apply min-w-36ut min-h-36ut;
+  }*/
+
+  /* Role-based styling for primary buttons */
+  [data-component='button'][data-role='primary'] {
+    @apply border-width-normal;
+    border-color: var(--btn-primary-border);
+    background-color: var(--btn-primary-bg);
+    color: var(--btn-primary-text);
+
+    &:hover:not(:disabled):not(.state-selected) {
+      border-color: var(--btn-primary-hover-border);
+      background-color: var(--btn-primary-hover-bg);
+    }
+
+    &:focus-visible {
+      @apply outline-normal outline-offset-normal;
+      outline-color: var(--btn-primary-focus-outline);
+    }
+
+    &.state-selected {
+      background-color: var(--btn-primary-selected-bg);
+      border-color: var(--btn-primary-selected-border);
+      color: var(--btn-primary-selected-text);
+    }
+  }
+
+  /* Role-based styling for secondary buttons */
+  [data-component='button'][data-role='secondary'] {
+    @apply border-width-normal;
+    border-color: var(--btn-secondary-border);
+    color: var(--btn-secondary-text);
+    background-color: var(--btn-secondary-bg);
+
+    &:hover:not(:disabled):not(.state-selected) {
+      background-color: var(--btn-secondary-hover-bg);
+      border-color: var(--btn-secondary-hover-border);
+    }
+
+    &:focus-visible {
+      @apply outline outline-normal outline-offset-normal;
+      outline-color: var(--btn-secondary-focus-outline);
+    }
+
+    &.state-selected {
+      background-color: var(--btn-secondary-selected-bg);
+      border-color: var(--btn-secondary-selected-border);
+      color: var(--btn-secondary-selected-text);
+    }
+  }
+
+  /* State-based styling for primary and secondary buttons */
+
+  [data-component='button'][data-role='primary'],
+  [data-component='button'][data-role='secondary'] {
+    &.state-active {
+      transform: var(--btn-active-transform);
+      box-shadow: var(--btn-active-shadow);
+    }
+
+    &.state-error {
+      border-color:var(--btn-error-border);
+    }
+
+    &.state-loading {
+      opacity: var(--btn-loading-opacity);
+      cursor: wait;
+    }
+  }
+
+  /* Disabled state */
+  [data-component='button']:disabled {
+    cursor: not-allowed;
+    opacity: var(--btn-disabled-opacity);
+    pointer-events: none;
+  }
+

package/dist/themes/hkdev/components/buttons/skip-button.css

@@ -0,0 +1,5 @@
+@import '../../global/on-colors.css';
+
+  [data-button='skip-button'] {
+  }
+

package/dist/themes/hkdev/components/drag-drop/draggable.css

@@ -0,0 +1,73 @@
+
+  [data-component='draggable'] {
+    user-select: none;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  [data-component='draggable']:not(.state-dragging):not(.state-drag-disabled) {
+    cursor: grab; /* Open hand when hovering draggable items */
+  }
+
+  /*[data-component='draggable']:active {
+    cursor: grabbing;
+  }*/
+
+  /* State-based styling using state classes */
+  [data-component='draggable'].state-idle {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  [data-component='draggable'].state-dragging {
+    opacity: 0.5;
+    transform: scale(0.95);
+    cursor: grabbing;
+  }
+
+  [data-component='draggable'].state-drag-preview {
+    transform: scale(0.98);
+    filter: brightness(0.95);
+  }
+
+  [data-component='draggable'].state-dropping {
+    animation: drop-finish 0.2s ease-out;
+  }
+
+  [data-component='draggable'].state-drag-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    filter: grayscale(0.5);
+  }
+
+  /* Preview follower */
+
+  [data-companion='drag-preview-follower'] {
+    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
+  }
+
+  [data-companion='drag-preview-follower'].state-can-drop {
+    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
+  }
+
+  [data-companion='drag-preview-follower'].state-cannot-drop {
+    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
+  }
+
+  /* Animations */
+  @keyframes drop-finish {
+    0% {
+      transform: scale(0.95);
+      opacity: 0.8;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+

package/dist/themes/hkdev/components/drag-drop/drop-zone.css

@@ -0,0 +1,58 @@
+/* Visual styling and customizable aspects */
+[data-component='drop-zone'] {
+  /*min-height: 100px;*/
+  border: 1px dashed var(--color-surface-400);
+  border-radius: var(--theme-rounded-container);
+  /*padding: 1rem;*/
+  transition: all 0.2s ease;
+  position: relative;
+  background-color: --alpha(var(--color-surface-50) / 0.5);
+
+  /* State-based styling using state classes - visual aspects only */
+  &.state-ready {
+    border-color: var(--color-surface-400);
+    background-color: transparent;
+  }
+
+  &.state-drag-over {
+    border-color: var(--color-primary-400);
+    background-color: color-mix(
+      in oklch,
+      var(--color-primary-500) 5%,
+      transparent
+    );
+  }
+  &.state-can-drop {
+    border-color: var(--color-success-500);
+    background-color: color-mix(
+      in oklch,
+      var(--color-success-500) 8%,
+      transparent
+    );
+    box-shadow: 0 0 0 3px
+      color-mix(in oklch, var(--color-success-500) 20%, transparent);
+  }
+
+  &.state-cannot-drop {
+    border-color: var(--color-error-500);
+    background-color: color-mix(
+      in oklch,
+      var(--color-error-500) 8%,
+      transparent
+    );
+    cursor: not-allowed;
+  }
+
+  /*&.state-drop-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: var(--color-surface-100);
+    }*/
+}
+
+/* Default styling for inner elements - all visual/customizable */
+[data-layer='content'],
+[data-layer='preview'],
+[data-layer='empty'] {
+  @apply type-base-md;
+}

package/dist/themes/hkdev/components/icons/icon-steeze.css

@@ -0,0 +1,16 @@
+/* @note using CSS vars defined in the parent button postcss */
+
+/* Type-based styling for text buttons */
+[data-component='icon'][data-type='steeze'] {
+  &[data-size='sm'] {
+    @apply w-16bt h-16bt;
+  }
+
+  &[data-size='md'] {
+    @apply w-28bt h-28bt;
+  }
+
+  &[data-size='lg'] {
+    @apply w-50bt h-50bt;
+  }
+}

package/dist/themes/hkdev/components/inputs/text-input.css

@@ -0,0 +1,102 @@
+/*@import "../../global/on-colors.css";*/
+
+[data-input='text-input'] {
+  /* Base */
+
+  /* Required and disabled */
+
+  &.required {
+  }
+  &.disabled {
+  }
+
+  /* Focus */
+
+  &.focused {
+    border: solid thin black;
+
+    & [data-child='legend'] {
+      color: black;
+    }
+
+    & [data-child='input'] {
+      color: black;
+    }
+  }
+
+  &.unfocused {
+    border: solid thin grey;
+
+    & [data-child='legend'] {
+      color: grey;
+    }
+
+    & [data-child='input'] {
+      color: grey;
+    }
+  }
+
+  /* Invalid */
+  &.invalid {
+    &.pristine [data-child='legend'] {
+      color: white;
+      background-color: orange;
+    }
+
+    &.dirty {
+      &.focused [data-child='legend'] {
+        color: black;
+        background-color: yellow;
+      }
+
+      &.unfocused [data-child='legend'] {
+        color: white;
+        background-color: red;
+      }
+    }
+  }
+
+  /* Pristine (valid-invalid) */
+
+  &.pristine.valid {
+    & [data-child='icon-box'] {
+      color: grey;
+    }
+  }
+
+  &.pristine.invalid {
+    & [data-child='icon-box'] {
+      color: orange;
+    }
+  }
+
+  /* Dirty (valid-invalid) */
+
+  &.dirty.valid {
+    &.focused {
+      & [data-child='icon-box'] {
+        color: grey;
+      }
+    }
+
+    &.unfocused {
+      & [data-child='icon-box'] {
+        color: green;
+      }
+    }
+  }
+
+  &.dirty.invalid {
+    &.focused {
+      & [data-child='icon-box'] {
+        color: orange;
+      }
+    }
+
+    &.unfocused {
+      & [data-child='icon-box'] {
+        color: red;
+      }
+    }
+  }
+}

package/dist/themes/hkdev/components/panels/panel.css

@@ -0,0 +1,25 @@
+[data-component='panel'] {
+  @apply py-30up px-40up;
+  @apply rounded-md;
+
+  &[data-variant='light'] {
+    @apply bg-surface-50;
+  }
+
+  &[data-variant='dark'] {
+    @apply bg-surface-950;
+  }
+
+  /* Size variants */
+  &[data-width='sm'] {
+    width: calc(400px * var(--scale-ui));
+  }
+
+  &[data-width='md'] {
+    width: calc(600px * var(--scale-ui));
+  }
+
+  &[data-width='lg'] {
+    width: calc(800px * var(--scale-ui));
+  }
+}

package/dist/themes/hkdev/components/rows/panel-grid-row.css

@@ -0,0 +1,4 @@
+@import '../../global/on-colors.css';
+
+[data-row='panel-grid-row'] {
+}

package/dist/themes/hkdev/components/rows/panel-row-2.css

@@ -0,0 +1,5 @@
+@import '../../global/on-colors.css';
+
+[data-row='panel-grid-row'][data-wrapper='panel-row-2'] {
+  @apply gap-20p mb-8p mt-8p;
+}

package/dist/themes/hkdev/components.css

@@ -0,0 +1,29 @@
+/* Import component styles */
+
+/* Rows */
+/*@import "./components/rows/panel-grid-row.css";*/
+/*@import "./components/rows/panel-row-2.css";*/
+
+/* Buttons */
+@import './components/buttons/button.css';
+@import './components/buttons/button-text.css';
+@import './components/buttons/button-icon-steeze.css';
+
+/*@import "./components/buttons/skip-button.css";*/
+
+@import './components/drag-drop/draggable.css';
+@import './components/drag-drop/drop-zone.css';
+
+/* Icons */
+@import './components/icons/icon-steeze.css';
+
+/* Panels */
+@import './components/panels/panel.css';
+
+/* Inputs */
+@import './components/inputs/text-input.css';
+
+/* ... */
+@import './components/blocks/text-block.css';
+
+

package/dist/themes/hkdev/debug.css

@@ -0,0 +1,2 @@
+
+/**/

package/dist/themes/hkdev/global/layout.css

@@ -0,0 +1,32 @@
+
+.page-centered-xl {
+  @apply max-w-xl px-20p mb-40p;
+  @apply flex flex-col;
+
+  @apply self-center;
+  @apply w-full;
+}
+
+.page-full {
+  @apply flex flex-col;
+
+  @apply w-full h-full;
+}
+
+.page-row {
+  @apply w-full flex flex-col;
+}
+
+.page-ui-margins {
+  @apply mt-120p;
+  @apply mr-20p;
+  @apply mb-120p;
+  @apply ml-20p;
+}
+
+.page-ui-margins-equal {
+  @apply mt-20p;
+  @apply mr-20p;
+  @apply mb-20p;
+  @apply ml-20p;
+}

package/dist/themes/hkdev/global/on-colors.css

@@ -0,0 +1,32 @@
+& .h1 {
+  color: var(--color-primary-contrast-light);
+}
+
+& .p {
+  color: var(--color-primary-contrast-light);
+}
+
+& .a {
+  color: var(--color-primary-contrast-light);
+}
+
+& svg {
+  color: var(--color-primary-contrast-light);
+}
+
+& .h1 {
+  color: var(--color-surface-950);
+}
+
+& .p {
+  color: var(--color-surface-500);
+}
+
+& .a {
+  color: var(--color-surface-500);
+}
+
+& svg {
+  color: var(--color-surface-500);
+}
+

package/dist/themes/hkdev/globals.css

@@ -0,0 +1,4 @@
+/*@import "./global/vars.css";*/
+@import "./global/on-colors.css";
+@import './global/layout.css';
+/*@import "./global/text.css";*/

package/dist/themes/hkdev/responsive.css

@@ -0,0 +1,12 @@
+
+
+/*html:has(body[data-theme=hkdev]) {
+  font-size: 0.83333vw;
+}*/
+
+/*[data-theme=hkdev]
+{
+  & [data-panel="test"]
+  {
+  }
+}*/

package/dist/themes/hkdev/theme-ext.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Set meta them color for the current theme
+ */
+export function setMetaThemeColor(): void;

package/dist/themes/hkdev/theme-ext.js

@@ -0,0 +1,12 @@
+import { theme as themeStore } from '../../stores/index.js';
+
+/**
+ * Set meta them color for the current theme
+ */
+export function setMetaThemeColor() {
+  const surfaceColor = getComputedStyle(document.documentElement)
+    .getPropertyValue('--color-surface-950')
+    .trim();
+
+  themeStore.setMetaThemeColor(`rgb(${surfaceColor})`);
+}