@berqnet/theme 0.0.0-stage → 2.4.291

package/dist/runtime/plugins/sample-plugin.d.ts

@@ -0,0 +1,20 @@
+declare module '#app' {
+    interface NuxtApp {
+        $modules_theme: {
+            version: string;
+            name: string;
+            description: string;
+        };
+    }
+}
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $modules_theme: {
+            version: string;
+            name: string;
+            description: string;
+        };
+    }
+}
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/sample-plugin.js

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "#app";
+import PackageJson from "../../../package.json";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.provide("modules_theme", { version: PackageJson.version, name: PackageJson.name, description: PackageJson.description });
+});

package/dist/runtime/plugins/sample-plugin.mjs

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "#app";
+import PackageJson from "../../../package.json";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.provide("modules_theme", { version: PackageJson.version, name: PackageJson.name, description: PackageJson.description });
+});

package/dist/runtime/plugins/theme-provider-plugin.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ThemeProvider: A Vue instance to provide theme related functionalities.
+ *
+ * Usage for OptionAPI:
+ * - Change the theme on button click:
+ *   this.$theme.setDarkMode(!this.$theme.isDark);
+ *
+ * - Register the theme change listener:
+ *   this.$theme.$on('darkMode', (value) => { console.log('darkMode:', value); });
+ *
+ *
+ * Usage for CompositionAPI:
+ * <script>
+ * export default {
+ *   created() {
+ *     const { $theme } = useNuxtApp()
+ *
+ *     // Theme değiştirme
+ *     $theme.setDarkMode(!$theme.isDark)
+ *
+ *     // Theme değişikliklerini dinleme
+ *     this.$nuxt.$on('theme:darkMode', (value) => {
+ *       console.log('Dark mode changed:', value)
+ *     })
+ *   }
+ * }
+ * </script>
+ */
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/theme-provider-plugin.js

@@ -0,0 +1,46 @@
+import { computed, ref, watch } from "vue";
+import { defineNuxtPlugin } from "#app";
+function getDarkModeFromLocalStorage() {
+  return import.meta.client && localStorage.getItem("darkMode") === "true";
+}
+function setDarkModeToLocalStorage(value) {
+  if (import.meta.client) {
+    localStorage.setItem("darkMode", value.toString());
+  }
+}
+function setHtmlDarkClass(isDark) {
+  if (import.meta.client) {
+    const htmlElement = document.documentElement;
+    if (isDark) {
+      htmlElement.classList.add("dark");
+    } else {
+      htmlElement.classList.remove("dark");
+    }
+  }
+}
+export default defineNuxtPlugin((nuxtApp) => {
+  const isDarkMode = ref(getDarkModeFromLocalStorage());
+  const isDark = computed({
+    get() {
+      return isDarkMode.value;
+    },
+    set(value) {
+      isDarkMode.value = value;
+      setDarkModeToLocalStorage(value);
+      nuxtApp.vueApp.config.globalProperties.$emit("theme:darkMode", value);
+    }
+  });
+  watch(isDark, (newVal) => {
+    setHtmlDarkClass(newVal);
+  });
+  const setDarkMode = (value) => {
+    isDark.value = value;
+  };
+  if (import.meta.client) {
+    setHtmlDarkClass(isDark.value);
+  }
+  nuxtApp.provide("theme", {
+    isDark,
+    setDarkMode
+  });
+});

package/dist/runtime/plugins/theme-provider-plugin.mjs

@@ -0,0 +1,46 @@
+import { computed, ref, watch } from "vue";
+import { defineNuxtPlugin } from "#app";
+function getDarkModeFromLocalStorage() {
+  return import.meta.client && localStorage.getItem("darkMode") === "true";
+}
+function setDarkModeToLocalStorage(value) {
+  if (import.meta.client) {
+    localStorage.setItem("darkMode", value.toString());
+  }
+}
+function setHtmlDarkClass(isDark) {
+  if (import.meta.client) {
+    const htmlElement = document.documentElement;
+    if (isDark) {
+      htmlElement.classList.add("dark");
+    } else {
+      htmlElement.classList.remove("dark");
+    }
+  }
+}
+export default defineNuxtPlugin((nuxtApp) => {
+  const isDarkMode = ref(getDarkModeFromLocalStorage());
+  const isDark = computed({
+    get() {
+      return isDarkMode.value;
+    },
+    set(value) {
+      isDarkMode.value = value;
+      setDarkModeToLocalStorage(value);
+      nuxtApp.vueApp.config.globalProperties.$emit("theme:darkMode", value);
+    }
+  });
+  watch(isDark, (newVal) => {
+    setHtmlDarkClass(newVal);
+  });
+  const setDarkMode = (value) => {
+    isDark.value = value;
+  };
+  if (import.meta.client) {
+    setHtmlDarkClass(isDark.value);
+  }
+  nuxtApp.provide("theme", {
+    isDark,
+    setDarkMode
+  });
+});

package/dist/runtime/public/scss/_buttons.scss

@@ -0,0 +1,157 @@
+@use 'colors' as *;
+@use 'icons' as *;
+
+$btn-config: (
+  'xs': (
+    min-width: 24px,
+    min-height: 24px,
+    padding: 0 4px,
+    font-size: 10px,
+    line-height: 10px,
+    border-radius: 3px,
+  ),
+  'sm': (
+    min-width: 32px,
+    min-height: 32px,
+    padding: 0 6px,
+    font-size: 12px,
+    line-height: 16px,
+    border-radius: 3px,
+  ),
+  'md': (
+    min-width: 36px,
+    min-height: 36px,
+    padding: 0 8px,
+    font-size: 14px,
+    line-height: 18px,
+    border-radius: 3px,
+  ),
+  'lg': (
+    min-width: 40px,
+    min-height: 40px,
+    padding: 0 12px,
+    font-size: 14px,
+    line-height: 20px,
+    border-radius: 4px,
+  ),
+  'xl': (
+    min-width: 48px,
+    min-height: 48px,
+    padding: 0 16px,
+    font-size: 14px,
+    line-height: 22px,
+    border-radius: 6px,
+  ),
+);
+$btn-font-color: white;
+$btn-bg: 500;
+$btn-border: 200;
+$btn-hover-bg: 600;
+$btn-active-bg: 700;
+
+// #### Generate Size Classes
+.btn {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @each $size, $value in $btn-config {
+    &-#{$size} {
+      @extend %icon-#{$size};
+      @each $prop-name, $prop-value in $value {
+        --button-#{$size}-#{$prop-name}: #{$prop-value};
+        #{$prop-name}: var(--button-#{$size}-#{$prop-name});
+      }
+    }
+  }
+}
+
+// #### Generate Color Classes
+
+@each $name, $item in $theme {
+  $name: '#{$name}';
+
+  .btn-#{$name} {
+    $light: if(
+      sass($name==light): var(--#{secondary}-#{600}) ; else: var(--button-font-color),
+    ); // var(--button-font-color); //
+
+    --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
+    --button-border-color: var(--#{$name}-#{500});
+    --button-hover-color: var(--button-hover-font-color);
+    --button-hover-background-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+    --button-hover-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+    --button-active-color: var(--button-active-font-color);
+    --button-active-background-color: rgba(var(--#{$name}-#{600}-rgb), 0.95); // #{map.get($item, #{$btn-active-bg})};
+    --button-active-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-active-bg})};
+    background-color: var(--button-background-color);
+    border-color: var(--button-border-color);
+    color: #{$light};
+
+    &:disabled {
+      &:not(.btn-ghost, .btn-outline) {
+        background-color: var(--button-border-color);
+        border-color: var(--button-border-color);
+      }
+    }
+
+    &-outline,
+    &-ghost {
+      --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
+      --button-border-color: var(--#{$name}-#{500});
+      --button-hover-color: var(--button-hover-font-color);
+      --button-hover-background-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+      --button-hover-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+      --button-active-color: var(--button-active-font-color);
+      --button-active-background-color: rgba(var(--#{$name}-#{600}-rgb), 0.95); // #{map.get($item, #{$btn-active-bg})};
+      --button-active-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-active-bg})};
+      border-color: var(--button-border-color);
+      color: var(--button-background-color);
+
+      &:disabled {
+        // color: #{$light};
+      }
+
+      &:hover {
+        background-color: var(--button-hover-background-color);
+        border-color: var(--button-hover-background-color);
+        color: if(sass($name==light): var(--#{light}-#{900}) ; else: var(--button-font-color)); // var(--button-font-color);
+        // background-color: transparent;
+        @if ($name==light) {
+          background-color: var(--#{light}-#{200});
+        }
+      }
+
+      &:focus {
+        // background-color: transparent;
+        // color: var(--light-500);
+        @if ($name==light) {
+          background-color: var(--#{light}-#{200});
+        }
+      }
+
+      &:active {
+        border-color: var(--button-active-background-color);
+        color: var(--button-font-color);
+        @if ($name==light) {
+          background-color: var(--#{light}-#{300});
+        } @else {
+          background-color: var(--button-active-background-color);
+        }
+      }
+    }
+
+    &:focus {
+      // @extend :focus-visible;
+    }
+
+    &-outline {
+      background-color: transparent;
+      border-style: solid;
+      border-width: 1px;
+    }
+
+    &-ghost {
+      background-color: transparent;
+      border-color: transparent !important;
+    }
+  }
+}

package/dist/runtime/public/scss/_colors.scss

@@ -0,0 +1,163 @@
+@use 'sass:map';
+
+$default-color: 5;
+$prefix: '';
+$theme-colors: (
+  'cta': purple,
+  'success': green,
+  'warning': yellow,
+  'danger': red,
+);
+
+$theme: (
+  light: (
+    '1': rgba(255, 255, 255, 1%),
+    '2': rgba(255, 255, 255, 1%),
+    '3': rgba(255, 255, 255, 1%),
+    '4': rgba(255, 255, 255, 1%),
+    '5': rgba(255, 255, 255, 1%),
+    '6': rgba(255, 255, 255, 1%),
+    '7': rgba(255, 255, 255, 1%),
+    '8': rgba(255, 255, 255, 1%),
+    '9': rgba(255, 255, 255, 1%),
+  ),
+  default: (
+    '1': #ddd7f7,
+    '2': #bcafef,
+    '3': #9a87e6,
+    '4': #795fde,
+    '5': #5737d6,
+    '6': #462cab,
+    '7': #342180,
+    '8': #231656,
+    '9': #110b2b,
+  ),
+  primary: (
+    '1': #ddd7f7,
+    '2': #bcafef,
+    '3': #9a87e6,
+    '4': #795fde,
+    '5': #5737d6,
+    '6': #462cab,
+    '7': #342180,
+    '8': #231656,
+    '9': #110b2b,
+  ),
+  secondary: (
+    '1': #eeedef,
+    '2': #dcdbe0,
+    '3': #cbcad0,
+    '4': #b9b8c1,
+    '5': #a8a6b1,
+    '6': #8b8993,
+    '7': #6e6c74,
+    '8': #515056,
+    '9': #343337,
+  ),
+  neutral: (
+    '1': #eeedef,
+    '2': #dcdbe0,
+    '3': #cbcad0,
+    '4': #b9b8c1,
+    '5': #a8a6b1,
+    '6': #8b8993,
+    '7': #6e6c74,
+    '8': #515056,
+    '9': #343337,
+  ),
+  info: (
+    '1': #d9ecff,
+    '2': #b2d9ff,
+    '3': #8cc7fe,
+    '4': #65b4fe,
+    '5': #3fa1fe,
+    '6': #3283cf,
+    '7': #2665a1,
+    '8': #194772,
+    '9': #0d2944,
+  ),
+  danger: (
+    '1': #f9dede,
+    '2': #f4bcbd,
+    '3': #ee9b9d,
+    '4': #e9797c,
+    '5': #e3585b,
+    '6': #b94749,
+    '7': #8f3638,
+    '8': #642526,
+    '9': #3a1415,
+  ),
+  error: (
+    '1': #f9dede,
+    '2': #f4bcbd,
+    '3': #ee9b9d,
+    '4': #e9797c,
+    '5': #e3585b,
+    '6': #b94749,
+    '7': #8f3638,
+    '8': #642526,
+    '9': #3a1415,
+  ),
+  success: (
+    '1': #dbf1e2,
+    '2': #b7e2c6,
+    '3': #94d4a9,
+    '4': #70c58d,
+    '5': #4cb770,
+    '6': #3d925a,
+    '7': #2e6e43,
+    '8': #1e492d,
+    '9': #0f2516,
+  ),
+  warning: (
+    '1': #faf3dc,
+    '2': #f6e8ba,
+    '3': #f1dc97,
+    '4': #edd175,
+    '5': #e8c552,
+    '6': #bda042,
+    '7': #927b32,
+    '8': #665722,
+    '9': #3b3212,
+  ),
+);
+
+@function to-rgb($value) {
+  @return red($value), green($value), blue($value);
+}
+
+@each $color, $item in $theme {
+  // add to theme colors
+  $color-list: (
+    $color: map.get($item, #{$default-color}),
+  );
+  $theme-colors: map.merge($theme-colors, $color-list);
+}
+
+// set variable
+:root {
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-bg-opacity: 1;
+  --el-color-white: white;
+  --el-color-black: black;
+  @each $color, $item in $theme {
+    @each $key, $value in $item {
+      & {
+        // --#{$prefix}#{"#{$color}"}-#{$key}: #{$value};
+        --el-color-#{"#{$color}"}-light-#{$key}: #{$value};
+        @if $key== '5' {
+          --el-color-#{"#{$color}"}: #{$value};
+        }
+      }
+
+      .#{$prefix}#{'#{$color}'}-#{$key} {
+        // color: #{$value};
+      }
+
+      .#{$prefix}bg-#{'#{$color}'}-#{$key} {
+        // background-color: #{$value};
+      }
+    }
+  }
+}

package/dist/runtime/public/scss/_containers.scss

@@ -0,0 +1,7 @@
+.container {
+  @apply w-full px-4 mx-auto md:max-w-screen-sm lg:max-w-screen-lg xl:max-w-screen-xl 2xl:max-w-screen-xl;
+}
+
+.fluid {
+  @apply w-full px-4;
+}

package/dist/runtime/public/scss/_fonts.scss

@@ -0,0 +1,84 @@
+$font-prefix: '';
+
+$font-config-h: (
+  h1: (
+    font-size: 24px,
+    line-height: 32px,
+    font-weight: 500,
+  ),
+  h2: (
+    font-size: 20px,
+    line-height: 28px,
+    font-weight: 500,
+  ),
+  h3: (
+    font-size: 18px,
+    line-height: 24px,
+    font-weight: 500,
+  ),
+
+  h4: (
+    font-size: 14px,
+    line-height: 20px,
+    font-weight: 500,
+  ),
+  h5: (
+    font-size: 12px,
+    line-height: 16px,
+    font-weight: 500,
+  ),
+  h6: (
+    font-size: 10px,
+    line-height: 12px,
+    font-weight: 500,
+  ),
+);
+
+$font-config-body: (
+  'p-large': (
+    font-size: 16px,
+    line-height: 22px,
+  ),
+  'p-medium': (
+    font-size: 14px,
+    line-height: 20px,
+  ),
+  'p-small': (
+    font-size: 12px,
+    line-height: 16px,
+  ),
+  'p-mini': (
+    font-size: 10px,
+    line-height: 14px,
+  ),
+  'p-tiny': (
+    font-size: 8px,
+    line-height: 10px,
+  ),
+);
+
+%h {
+  font-style: normal;
+  margin: 0;
+}
+
+@each $selector, $value in $font-config-h {
+  #{$selector},
+  .#{$selector},
+  %#{$selector} {
+    @extend %h;
+    @each $prop-name, $prop-value in $value {
+      --#{$selector}-#{$prop-name}: #{$prop-value};
+      #{$prop-name}: var(--#{$selector}-#{$prop-name});
+    }
+  }
+}
+@each $selector, $value in $font-config-body {
+  .#{$selector},
+  %#{$selector} {
+    @each $prop-name, $prop-value in $value {
+      --#{$selector}-#{$prop-name}: #{$prop-value};
+      #{$prop-name}: var(--#{$selector}-#{$prop-name});
+    }
+  }
+}

package/dist/runtime/public/scss/_icons.scss

@@ -0,0 +1,111 @@
+$icon-prefix: 'icon';
+$icon-config: (
+  'xxs': (
+    min-width: 0.75rem,
+    min-height: 0.75rem,
+    font-size: 0.75rem,
+  ),
+  'xs': (
+    min-width: 1rem,
+    min-height: 1rem,
+    font-size: 1rem,
+  ),
+  'sm': (
+    min-width: 1.25rem,
+    min-height: 1.25rem,
+    font-size: 1.25rem,
+  ),
+  'md': (
+    min-width: 1.25rem,
+    min-height: 1.25rem,
+    font-size: 1.25rem,
+  ),
+  'lg': (
+    min-width: 1.5rem,
+    min-height: 1.5rem,
+    font-size: 1.5rem,
+  ),
+  'xl': (
+    min-width: 1.75rem,
+    min-height: 1.75rem,
+    font-size: 1.75rem,
+  ),
+  'xxl': (
+    min-width: 2em,
+    min-height: 2rem,
+    font-size: 2rem,
+  ),
+);
+
+%icon {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+  position: relative;
+  @each $size, $value in $icon-config {
+    &-#{$size} {
+      &::before,
+      &::after {
+        @each $prop-name, $prop-value in $value {
+          --#{$icon-prefix}-#{$size}-#{$prop-name}: #{$prop-value};
+          #{$prop-name}: var(--#{$icon-prefix}-#{$size}-#{$prop-name});
+        }
+      }
+    }
+  }
+
+  &-left {
+    &::before {
+      content: '';
+    }
+
+    &::after {
+      content: none;
+    }
+  }
+
+  &-right {
+    &::before {
+      content: none;
+    }
+
+    &-outline {
+      &::before {
+        right: 0;
+      }
+    }
+  }
+}
+
+[class^='#{$icon-prefix}'],
+[class*=' #{$icon-prefix}'] {
+  @extend %icon;
+
+  &:empty {
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+
+    &::before,
+    &::after {
+      margin: 0;
+    }
+  }
+}
+
+@each $size, $value in $icon-config {
+  [class^='#{$icon-prefix}-#{$size}'],
+  [class*=' #{$icon-prefix}-#{$size}'] {
+    @extend %icon-#{$size};
+  }
+}
+
+[class^='#{$icon-prefix}-right'],
+[class*=' #{$icon-prefix}-right'] {
+  @extend %icon-right;
+}
+
+[class^='#{$icon-prefix}-left'],
+[class*=' #{$icon-prefix}-left'] {
+  @extend %icon-left;
+}