@hkdigital/lib-sveltekit 0.0.95 → 0.0.97

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']})`);
+}

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

@@ -0,0 +1,226 @@
+export default theme;
+declare namespace theme {
+    let name: string;
+    let properties: {
+        '--type-scale-factor': string;
+        '--type-scale-1': string;
+        '--type-scale-2': string;
+        '--type-scale-3': string;
+        '--type-scale-4': string;
+        '--type-scale-5': string;
+        '--type-scale-6': string;
+        '--type-scale-7': string;
+        '--type-scale-8': string;
+        '--type-scale-9': string;
+        '--type-scale-10': string;
+        '--type-scale-11': string;
+        '--type-scale-12': string;
+        '--type-scale-13': string;
+        '--base-font-color': string;
+        '--base-font-color-dark': string;
+        '--base-font-family': string;
+        '--base-font-size': string;
+        '--base-line-height': string;
+        '--base-font-weight': string;
+        '--base-font-style': string;
+        '--base-letter-spacing': string;
+        '--heading-font-color': string;
+        '--heading-font-color-dark': string;
+        '--heading-font-family': string;
+        '--heading-font-weight': string;
+        '--heading-font-style': string;
+        '--heading-letter-spacing': string;
+        '--anchor-font-color': string;
+        '--anchor-font-color-dark': string;
+        '--anchor-font-family': string;
+        '--anchor-font-size': string;
+        '--anchor-line-height': string;
+        '--anchor-font-weight': string;
+        '--anchor-font-style': string;
+        '--anchor-letter-spacing': string;
+        '--anchor-text-decoration': string;
+        '--anchor-text-decoration-hover': string;
+        '--anchor-text-decoration-active': string;
+        '--anchor-text-decoration-focus': string;
+        '--space-scale-factor': string;
+        '--radii-default': string;
+        '--radii-container': string;
+        '--border-width-default': string;
+        '--divide-width-default': string;
+        '--outline-width-default': string;
+        '--ring-width-default': string;
+        '--body-background-color': string;
+        '--body-background-color-dark': string;
+        '--color-primary-50': string;
+        '--color-primary-100': string;
+        '--color-primary-200': string;
+        '--color-primary-300': string;
+        '--color-primary-400': string;
+        '--color-primary-500': string;
+        '--color-primary-600': string;
+        '--color-primary-700': string;
+        '--color-primary-800': string;
+        '--color-primary-900': string;
+        '--color-primary-950': string;
+        '--color-primary-contrast-dark': string;
+        '--color-primary-contrast-light': string;
+        '--color-primary-contrast-50': string;
+        '--color-primary-contrast-100': string;
+        '--color-primary-contrast-200': string;
+        '--color-primary-contrast-300': string;
+        '--color-primary-contrast-400': string;
+        '--color-primary-contrast-500': string;
+        '--color-primary-contrast-600': string;
+        '--color-primary-contrast-700': string;
+        '--color-primary-contrast-800': string;
+        '--color-primary-contrast-900': string;
+        '--color-primary-contrast-950': string;
+        '--color-secondary-50': string;
+        '--color-secondary-100': string;
+        '--color-secondary-200': string;
+        '--color-secondary-300': string;
+        '--color-secondary-400': string;
+        '--color-secondary-500': string;
+        '--color-secondary-600': string;
+        '--color-secondary-700': string;
+        '--color-secondary-800': string;
+        '--color-secondary-900': string;
+        '--color-secondary-950': string;
+        '--color-secondary-contrast-dark': string;
+        '--color-secondary-contrast-light': string;
+        '--color-secondary-contrast-50': string;
+        '--color-secondary-contrast-100': string;
+        '--color-secondary-contrast-200': string;
+        '--color-secondary-contrast-300': string;
+        '--color-secondary-contrast-400': string;
+        '--color-secondary-contrast-500': string;
+        '--color-secondary-contrast-600': string;
+        '--color-secondary-contrast-700': string;
+        '--color-secondary-contrast-800': string;
+        '--color-secondary-contrast-900': string;
+        '--color-secondary-contrast-950': string;
+        '--color-tertiary-50': string;
+        '--color-tertiary-100': string;
+        '--color-tertiary-200': string;
+        '--color-tertiary-300': string;
+        '--color-tertiary-400': string;
+        '--color-tertiary-500': string;
+        '--color-tertiary-600': string;
+        '--color-tertiary-700': string;
+        '--color-tertiary-800': string;
+        '--color-tertiary-900': string;
+        '--color-tertiary-950': string;
+        '--color-tertiary-contrast-dark': string;
+        '--color-tertiary-contrast-light': string;
+        '--color-tertiary-contrast-50': string;
+        '--color-tertiary-contrast-100': string;
+        '--color-tertiary-contrast-200': string;
+        '--color-tertiary-contrast-300': string;
+        '--color-tertiary-contrast-400': string;
+        '--color-tertiary-contrast-500': string;
+        '--color-tertiary-contrast-600': string;
+        '--color-tertiary-contrast-700': string;
+        '--color-tertiary-contrast-800': string;
+        '--color-tertiary-contrast-900': string;
+        '--color-tertiary-contrast-950': string;
+        '--color-success-50': string;
+        '--color-success-100': string;
+        '--color-success-200': string;
+        '--color-success-300': string;
+        '--color-success-400': string;
+        '--color-success-500': string;
+        '--color-success-600': string;
+        '--color-success-700': string;
+        '--color-success-800': string;
+        '--color-success-900': string;
+        '--color-success-950': string;
+        '--color-success-contrast-dark': string;
+        '--color-success-contrast-light': string;
+        '--color-success-contrast-50': string;
+        '--color-success-contrast-100': string;
+        '--color-success-contrast-200': string;
+        '--color-success-contrast-300': string;
+        '--color-success-contrast-400': string;
+        '--color-success-contrast-500': string;
+        '--color-success-contrast-600': string;
+        '--color-success-contrast-700': string;
+        '--color-success-contrast-800': string;
+        '--color-success-contrast-900': string;
+        '--color-success-contrast-950': string;
+        '--color-warning-50': string;
+        '--color-warning-100': string;
+        '--color-warning-200': string;
+        '--color-warning-300': string;
+        '--color-warning-400': string;
+        '--color-warning-500': string;
+        '--color-warning-600': string;
+        '--color-warning-700': string;
+        '--color-warning-800': string;
+        '--color-warning-900': string;
+        '--color-warning-950': string;
+        '--color-warning-contrast-dark': string;
+        '--color-warning-contrast-light': string;
+        '--color-warning-contrast-50': string;
+        '--color-warning-contrast-100': string;
+        '--color-warning-contrast-200': string;
+        '--color-warning-contrast-300': string;
+        '--color-warning-contrast-400': string;
+        '--color-warning-contrast-500': string;
+        '--color-warning-contrast-600': string;
+        '--color-warning-contrast-700': string;
+        '--color-warning-contrast-800': string;
+        '--color-warning-contrast-900': string;
+        '--color-warning-contrast-950': string;
+        '--color-error-50': string;
+        '--color-error-100': string;
+        '--color-error-200': string;
+        '--color-error-300': string;
+        '--color-error-400': string;
+        '--color-error-500': string;
+        '--color-error-600': string;
+        '--color-error-700': string;
+        '--color-error-800': string;
+        '--color-error-900': string;
+        '--color-error-950': string;
+        '--color-error-contrast-dark': string;
+        '--color-error-contrast-light': string;
+        '--color-error-contrast-50': string;
+        '--color-error-contrast-100': string;
+        '--color-error-contrast-200': string;
+        '--color-error-contrast-300': string;
+        '--color-error-contrast-400': string;
+        '--color-error-contrast-500': string;
+        '--color-error-contrast-600': string;
+        '--color-error-contrast-700': string;
+        '--color-error-contrast-800': string;
+        '--color-error-contrast-900': string;
+        '--color-error-contrast-950': string;
+        '--color-surface-50': string;
+        '--color-surface-100': string;
+        '--color-surface-200': string;
+        '--color-surface-300': string;
+        '--color-surface-400': string;
+        '--color-surface-500': string;
+        '--color-surface-600': string;
+        '--color-surface-700': string;
+        '--color-surface-800': string;
+        '--color-surface-900': string;
+        '--color-surface-950': string;
+        '--color-surface-contrast-dark': string;
+        '--color-surface-contrast-light': string;
+        '--color-surface-contrast-50': string;
+        '--color-surface-contrast-100': string;
+        '--color-surface-contrast-200': string;
+        '--color-surface-contrast-300': string;
+        '--color-surface-contrast-400': string;
+        '--color-surface-contrast-500': string;
+        '--color-surface-contrast-600': string;
+        '--color-surface-contrast-700': string;
+        '--color-surface-contrast-800': string;
+        '--color-surface-contrast-900': string;
+        '--color-surface-contrast-950': string;
+    };
+    namespace metadata {
+        let version: string;
+    }
+}