@hkdigital/lib-sveltekit 0.0.94 → 0.0.96

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

@@ -0,0 +1,73 @@
+
+@import "../../global/on-colors.postcss";
+
+@define-mixin buttons-plain-button {
+
+  [data-button="plain-button"] {
+    @apply py-6p rounded-sm;
+
+     & p {
+      @apply text-20p base-font-family font-black my-0 mx-16p uppercase;
+    }
+
+    /* not disabled */
+
+    &:not([disabled]) {
+      &.role-primary {
+        @apply border-4p border-primary-500 bg-primary-500;
+        & .p {
+          color: rgb(var(--color-primary-50));
+        }
+      }
+
+      &.role-secondary {
+        @apply border-4p border-primary-500;
+
+        & .p {
+          color: rgb(var(--color-primary-500));
+        }
+
+        &.variant-white
+        {
+          @apply border-surface-50;
+
+          & .p {
+            color: rgb(var(--color-surface-50));
+          }
+        }
+      }
+    }
+
+    /* disabled */
+
+    &[disabled] {
+      &.role-primary {
+        @apply bg-surface-500;
+        & .p {
+          color: rgb(var(--color-surface-300));
+        }
+      }
+
+      &.role-secondary {
+        @apply border-4p bg-primary-50;
+
+        & .p {
+          color: rgb(var(--color-surface-300));
+        }
+      }
+
+    }
+  }
+
+
+
+  /*[data-button-round-arrow-next] {
+    / * @apply bg-primary-500; * /
+    @apply text-24p base-font-family font-bold;
+
+    & svg {
+      color: rgb(var(--color-primary-500));    
+      @apply w-80p h-80p;
+    }
+  }*/
+}

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

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

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

@@ -0,0 +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;
+        }
+      }
+    }
+
+  }
+}

package/dist/themes/hkdev/components/panels/plain-panel.postcss

@@ -0,0 +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;
+    }
+  }
+}

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

@@ -0,0 +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;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+
+@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

@@ -0,0 +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;
+
+  }
+}

package/dist/themes/hkdev/components.postcss

@@ -0,0 +1,49 @@
+/* Import component styles */
+
+/* Panels */
+/*@import "./components/panels/plain-panel.postcss";*/
+/*@import "./components/panels/speech-bubble.postcss";*/
+
+/* Rows */
+/*@import "./components/rows/panel-grid-row.postcss";*/
+/*@import "./components/rows/panel-row-2.postcss";*/
+
+/* Buttons */
+@import "./components/buttons/plain-button.postcss";
+/*@import "./components/buttons/skip-button.postcss";*/
+
+/* Inputs */
+@import "./components/inputs/text-input.postcss";
+
+/* ... */
+/*@import "./components/select-level.postcss";*/
+
+/* Not used */
+/*@import "./components/hk-tab-icon.postcss";*/
+/*@import "./components/avatar-layer.postcss";*/
+
+/* Wrap component styles in theme selector */
+
+
+[data-theme=hkdev] {
+
+  /* Panels */
+  /*  @mixin panels-plain-panel;*/
+  /*  @mixin panels-speech-bubble;*/
+
+  /* Rows */
+  /*  @mixin rows-panel-grid-row;*/
+  /*  @mixin rows-panel-row-2;*/
+
+  /* Buttons */
+  @mixin buttons-plain-button;
+  /*  @mixin buttons-skip-button;*/
+
+  /* Inputs */
+  @mixin inputs-text-input;
+
+  /* ... */
+  /*  @mixin hk_tab_icon;*/
+  /*  @mixin avatar_layer;*/
+  /*  @mixin select_level;*/
+}

package/dist/themes/hkdev/debug.postcss

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

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

@@ -0,0 +1,39 @@
+
+@define-mixin all_layout {
+
+  .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.postcss

@@ -0,0 +1,53 @@
+
+@define-mixin on_surface_dark {
+  
+  & .h1 {
+    color: rgb(var(--color-primary-contrast-light));
+  }
+
+  & .p {
+    color: rgb(var(--color-primary-contrast-light));
+  }
+
+  & .a {
+    color: rgb(var(--color-primary-contrast-light));
+  }
+
+  & svg {
+    color: rgb(var(--color-primary-contrast-light));
+  }
+
+}
+
+@define-mixin on_surface_light {
+  
+  & .h1 {
+    color: rgb(var(--color-surface-950));
+  }
+
+  & .p {
+    color: rgb(var(--color-surface-500));
+  }
+
+  & .a {
+    color: rgb(var(--color-surface-500));
+  }
+
+  & svg {
+    color: rgb(var(--color-surface-500));
+  }
+  
+}
+
+@define-mixin all_on_colors {
+
+  /* .on-primary-dark < :not('cancel-on-primary-dark') */
+  .on-primary-dark {
+    @mixin on_surface_dark;
+  }
+
+  .on-primary-light {    
+    @mixin on_surface_light;
+  }
+
+}

package/dist/themes/hkdev/global/text.postcss__

@@ -0,0 +1,35 @@
+/**
+ * Tailwind defaults
+ *
+ * text-sm 14px;
+ * text-base 16px;
+ * text-lg 18px;
+ * text-xl 20px;
+ * text-2xl 24px;
+ * text-3xl 30px;
+ * text-4xl 36px;
+ * text-5xl 48px;
+ * text-6xl 60px;
+ * text-7xl 72px;
+ * text-8xl 96px;
+ * text-9xl 128px;
+ *
+ * @see https://tailwindcss.com/docs/font-size
+ */
+
+@define-mixin all_text {
+
+  a {
+    @apply text-sm font-bold underline;
+  }
+
+  p {
+    @apply text-xl;
+  }
+
+  h1 {
+    &.text-presenter-title {      
+      @apply text-5xl;
+    }
+  }
+}

package/dist/themes/hkdev/global/vars.postcss__

@@ -0,0 +1,7 @@
+
+@define-mixin all_vars {
+
+  /* --tab-bar-height: 72px;  
+  --tab-bar-selector-width: 132px;
+  --tab-bar-selector-height: var(--tab-bar-height, 72px); */
+}

package/dist/themes/hkdev/globals.postcss

@@ -0,0 +1,12 @@
+/*@import "./global/vars.postcss";*/
+/*@import "./global/on-colors.postcss";*/
+@import "./global/layout.postcss";
+/*@import "./global/text.postcss";*/
+
+[data-theme] {
+/*  @mixin all_vars;*/
+/*  @mixin all_on_colors;*/
+  @mixin all_layout;
+/*  @mixin all_text;*/
+
+}

package/dist/themes/hkdev/responsive.postcss

@@ -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,15 @@
+import theme from '../hkdev/theme.js';
+
+import { theme as themeStore } from '@hkdigital/lib-sveltekit/stores/index.js';
+
+/**
+ * Set meta them color for the current theme
+ */
+export function setMetaThemeColor() {
+  const props = theme.properties;
+
+  themeStore.setMetaThemeColor(`rgb( ${props['--color-surface-950']})`);
+
+  // setMetaThemeColorDark(`rgb( ${props['--color-primary-950']})`);
+  // setMetaThemeColorBase(`rgb( ${props['--color-primary-50']})`);
+}