@hkdigital/lib-sveltekit 0.1.6 → 0.1.8

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

@@ -0,0 +1,91 @@
+@define-mixin component-button {
+
+  /* Base button styles */
+  [data-component="button"][data-type="plain"] {
+    @apply rounded-md;
+    @apply border-width-normal;
+    @apply text-ui-base base-font-family font-medium;
+  }
+
+  /* Role-based styling for enabled buttons */
+  [data-component="button"][data-type="plain"] {
+    &:not([disabled]) {
+      &[data-role="primary"] {
+        @apply border-primary-500 bg-primary-500;
+        @apply text-primary-contrast-500;
+      }
+
+      &[data-role="secondary"] {
+        @apply border-secondary-500 text-secondary-500 bg-transparent;
+      }
+    }
+
+    /* Role-based styling for disabled buttons */
+    &[disabled] {
+      @apply cursor-not-allowed;
+
+      &[data-role="primary"] {
+        @apply bg-surface-300 text-surface-100;
+      }
+
+      &[data-role="secondary"] {
+        @apply border-surface-300 text-surface-300 bg-transparent;
+      }
+    }
+  }
+
+  /* Size variants */
+  [data-component="button"][data-type="plain"] {
+    &[data-size="sm"] {
+      @apply px-8ut py-4ut;
+      @apply text-ui-sm;
+      @apply gap-4ut;
+/*      height: 32ut;*/
+    }
+
+    &[data-size="md"] {
+      @apply px-16ut py-8ut;
+      @apply text-ui-base;
+      @apply gap-8ut;
+/*      height: 40ut;*/
+    }
+
+    &[data-size="lg"] {
+      @apply px-20ut py-10ut;
+      @apply text-ui-lg;
+      @apply gap-10ut;
+/*      height: 50ut;*/
+    }
+  }
+
+  /* Hover, focus and active states for enabled buttons */
+  [data-component="button"][data-type="plain"]:not([disabled]) {
+    &[data-role="primary"] {
+      &:hover {
+        @apply bg-primary-600;
+      }
+      &:focus-visible {
+        @apply bg-primary-600;
+        outline: 2ut solid rgb(var(--color-primary-300));
+        outline-offset: 2ut;
+      }
+      &:active {
+        @apply bg-primary-700;
+      }
+    }
+
+    &[data-role="secondary"] {
+      &:hover {
+        @apply bg-secondary-50;
+      }
+      &:focus-visible {
+        @apply bg-secondary-50;
+        outline: 2ut solid rgb(var(--color-secondary-300));
+        outline-offset: 2ut;
+      }
+      &:active {
+        @apply bg-secondary-100;
+      }
+    }
+  }
+}

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

@@ -1,8 +1,8 @@
-@import "../../global/on-colors.postcss";
-
-@define-mixin buttons-skip-button {
-
-  [data-button="skip-button"] {
-
-  }
-}
+@import "../../global/on-colors.postcss";
+
+@define-mixin buttons-skip-button {
+
+  [data-button="skip-button"] {
+
+  }
+}

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

@@ -0,0 +1,22 @@
+@define-mixin component-icon-steeze {
+
+  /* @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.postcss

@@ -1,108 +1,108 @@
-
-/*@import "../../global/on-colors.postcss";*/
-
-@define-mixin inputs-text-input {
-
-  [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;
-        }
-      }
-    }
-
-  }
-}
+
+/*@import "../../global/on-colors.postcss";*/
+
+@define-mixin inputs-text-input {
+
+  [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/plain-panel.postcss

@@ -1,46 +1,46 @@
-/*@import "../../global/on-colors.postcss";*/
-
-@define-mixin panels-plain-panel {
-  [data-panel="plain-panel"] {
-
-    @mixin on_surface_light;
-    @apply bg-primary-50;
-
-    @apply p-40p rounded-md;
-
-    max-width: 50vw;
-/*    max-width: 27vw;*/
-    /* width: 26vw; */
-
-    & picture {
-      display: block;
-      max-width: 100%;
-      @apply pr-80p;      
-      /* border: solid 1px red; */
-    }
-
-    & > .h1 {
-      @apply text-32p mb-20p;
-    }
-
-    & > .p {
-      @apply text-24p mb-10p;
-
-      & + picture {
-        @apply mt-40p;
-      }
-      
-    }
-
-    & button {
-      /* @apply min-w-180p; */
-    }
-
-    & .cc_cols-stretch {
-      @apply grid auto-cols-fr grid-flow-col;
-      @apply justify-stretch;
-
-      border: solid 8px red;
-    }
-  }
-}
+/*@import "../../global/on-colors.postcss";*/
+
+@define-mixin panels-plain-panel {
+  [data-panel="plain-panel"] {
+
+    @mixin on_surface_light;
+    @apply bg-primary-50;
+
+    @apply p-40p rounded-md;
+
+    max-width: 50vw;
+/*    max-width: 27vw;*/
+    /* width: 26vw; */
+
+    & picture {
+      display: block;
+      max-width: 100%;
+      @apply pr-80p;      
+      /* border: solid 1px red; */
+    }
+
+    & > .h1 {
+      @apply text-32p mb-20p;
+    }
+
+    & > .p {
+      @apply text-24p mb-10p;
+
+      & + picture {
+        @apply mt-40p;
+      }
+      
+    }
+
+    & button {
+      /* @apply min-w-180p; */
+    }
+
+    & .cc_cols-stretch {
+      @apply grid auto-cols-fr grid-flow-col;
+      @apply justify-stretch;
+
+      border: solid 8px red;
+    }
+  }
+}

package/dist/themes/hkdev/components/panels/speech-bubble.postcss

@@ -1,52 +1,52 @@
-
-@import "../../global/on-colors.postcss";
-
-@define-mixin panels-speech-bubble {
-  [data-panel="speech-bubble"] {
-
-    @mixin on_surface_light;
-    @apply bg-primary-50;
-
-    @apply pt-20p pb-20p pr-40p pl-40p rounded-tl-lg rounded-tr-lg rounded-bl-lg;
-
-    /* max-width: 26vw;*/
-    /* width: 26vw; */
-
-    &.small {
-      max-width: 16vw;
-    }
-
-    & picture {
-      display: block;
-      max-width: 100%;
-      @apply pr-80p;      
-      /* border: solid 1px red; */
-    }
-
-    & [data-section="title"]
-    {
-      & .h1 {
-        @apply text-32p pt-8p pb-8p;
-      }
-    }
-
-    & [data-section="text"]
-    {
-      & .p {
-        @apply text-20p pb-10p;
-
-        /*& + picture {
-          @apply mt-40p;
-        }*/
-      }
-    }
-
-
-    /* Footer */
-
-    & [data-row][data-section="footer"]
-    {
-      @apply pt-10p;
-    }
-  }
-}
+
+@import "../../global/on-colors.postcss";
+
+@define-mixin panels-speech-bubble {
+  [data-panel="speech-bubble"] {
+
+    @mixin on_surface_light;
+    @apply bg-primary-50;
+
+    @apply pt-20p pb-20p pr-40p pl-40p rounded-tl-lg rounded-tr-lg rounded-bl-lg;
+
+    /* max-width: 26vw;*/
+    /* width: 26vw; */
+
+    &.small {
+      max-width: 16vw;
+    }
+
+    & picture {
+      display: block;
+      max-width: 100%;
+      @apply pr-80p;      
+      /* border: solid 1px red; */
+    }
+
+    & [data-section="title"]
+    {
+      & .h1 {
+        @apply text-32p pt-8p pb-8p;
+      }
+    }
+
+    & [data-section="text"]
+    {
+      & .p {
+        @apply text-20p pb-10p;
+
+        /*& + picture {
+          @apply mt-40p;
+        }*/
+      }
+    }
+
+
+    /* Footer */
+
+    & [data-row][data-section="footer"]
+    {
+      @apply pt-10p;
+    }
+  }
+}

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

@@ -1,7 +1,7 @@
-
-@import "../../global/on-colors.postcss";
-
-@define-mixin rows-panel-grid-row {
-  [data-row="panel-grid-row"] {
-  }
-}
+
+@import "../../global/on-colors.postcss";
+
+@define-mixin rows-panel-grid-row {
+  [data-row="panel-grid-row"] {
+  }
+}

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

@@ -1,9 +1,9 @@
-
-@import "../../global/on-colors.postcss";
-
-@define-mixin rows-panel-row-2 {
-  [data-row="panel-grid-row"][data-wrapper="panel-row-2"] {
-    @apply gap-20p mb-8p mt-8p;
-
-  }
-}
+
+@import "../../global/on-colors.postcss";
+
+@define-mixin rows-panel-row-2 {
+  [data-row="panel-grid-row"][data-wrapper="panel-row-2"] {
+    @apply gap-20p mb-8p mt-8p;
+
+  }
+}