@timus-networks/theme 2.4.135 → 2.4.136

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@timus-networks/theme",
   "configKey": "themeOptions",
-  "version": "2.4.134",
+  "version": "2.4.135",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -11,7 +11,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@timus-networks/theme";
-const version = "2.4.134";
+const version = "2.4.135";
 const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
 const type = "module";
 const exports = {

package/dist/runtime/assets/scss/main.css

@@ -1212,6 +1212,20 @@ select {
   white-space: nowrap;
 }
 
+/* Element Chalk Variables */
+/**
+Bununla selectorun içerisine variable ekleyebiliyorsun
+.selector{
+    // --el-button-text-color: var(--el-color-primary); -> bu eklenir
+    @include css-var-from-global(('button-text-color'), ('color-primary'));
+
+    // bununla property'ye değer atayabilirsin (hiyerarşik alıyor)
+    color: getCssVar('colors-neutral-light-2');
+
+    // bununla da property alınabililyor
+    font-size: map.get($select, 'font-size');
+}
+**/
 html,
 body,
 #main {
@@ -1236,6 +1250,39 @@ body {
   flex-basis: 100%;
   justify-content: center;
 }
+.page-footer .el-button:first-child {
+  --el-button-text-color: var(--el-color-secondary-light-9);
+  --el-button-bg-color: var(--el-color-secondary-light-1);
+  --el-button-border-color: var(--el-color-secondary-light-2);
+  --el-button-outline-color: var(--el-color-secondary-light-5);
+  --el-button-active-color: var(--el-color-secondary-dark-2);
+  --el-button-hover-text-color: var(--el-color-secondary-light-9);
+  --el-button-hover-link-text-color: var(--el-color-secondary-light-5);
+  --el-button-hover-bg-color: var(--el-color-white);
+  --el-button-hover-border-color: var(--el-color-secondary-light-3);
+  --el-button-active-bg-color: var(--el-color-secondary-light-2);
+  --el-button-active-border-color: var(--el-color-secondary-light-2);
+  --el-button-disabled-text-color: var(--el-color-white);
+  --el-button-disabled-bg-color: var(--el-color-secondary-light-1);
+  --el-button-disabled-border-color: var(--el-color-secondary-light-1);
+}
+.page-footer .el-button:first-child.is-plain, .page-footer .el-button:first-child.is-text, .page-footer .el-button:first-child.is-link {
+  --el-button-text-color: var(--el-color-secondary);
+  --el-button-disabled-text-color: var(--el-color-secondary-light-9);
+  --el-button-bg-color: var(--el-color-white);
+  --el-button-border-color: var(--el-color-secondary-light-5);
+  --el-button-hover-text-color: var(--el-color-secondary-light-4);
+  --el-button-hover-bg-color: var(--el-color-white);
+  --el-button-hover-border-color: var(--el-color-secondary-light-4);
+  --el-button-active-text-color: var(--el-color-secondary-light-6);
+  --el-button-active-bg-color: var(--el-color-white);
+  --el-button-active-border-color: var(--el-color-secondary-light-6);
+}
+.page-footer .el-button:first-child.is-plain.is-disabled, .page-footer .el-button:first-child.is-plain.is-disabled:hover, .page-footer .el-button:first-child.is-plain.is-disabled:focus, .page-footer .el-button:first-child.is-plain.is-disabled:active, .page-footer .el-button:first-child.is-text.is-disabled, .page-footer .el-button:first-child.is-text.is-disabled:hover, .page-footer .el-button:first-child.is-text.is-disabled:focus, .page-footer .el-button:first-child.is-text.is-disabled:active, .page-footer .el-button:first-child.is-link.is-disabled, .page-footer .el-button:first-child.is-link.is-disabled:hover, .page-footer .el-button:first-child.is-link.is-disabled:focus, .page-footer .el-button:first-child.is-link.is-disabled:active {
+  color: var(--el-color-secondary-light-2);
+  background-color: transparent;
+  border-color: var(--el-color-secondary-light-2);
+}
 
 .el-icon.more-icon {
   align-items: center;
@@ -1250,20 +1297,6 @@ body {
   width: 20px;
 }
 
-/* Element Chalk Variables */
-/**
-Bununla selectorun içerisine variable ekleyebiliyorsun
-.selector{
-    // --el-button-text-color: var(--el-color-primary); -> bu eklenir
-    @include css-var-from-global(('button-text-color'), ('color-primary'));
-
-    // bununla property'ye değer atayabilirsin (hiyerarşik alıyor)
-    color: getCssVar('colors-neutral-light-2');
-
-    // bununla da property alınabililyor
-    font-size: map.get($select, 'font-size');
-}
-**/
 :root {
   --el-color-white: #ffffff;
   --el-color-black: #000000;

package/dist/runtime/components/development/example.button.vue

@@ -208,6 +208,10 @@
         </code>
       </template>
     </el-card>
+    <div class="page-footer">
+      <el-button>Cancel</el-button>
+      <el-button>Submit</el-button>
+    </div>
   </div>
 </template>
 

package/dist/runtime/public/scss/theme.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --font-size: 1em;
   --border-width: 1px;
@@ -1206,6 +1207,20 @@ select {
   white-space: nowrap;
 }
 
+/* Element Chalk Variables */
+/**
+Bununla selectorun içerisine variable ekleyebiliyorsun
+.selector{
+    // --el-button-text-color: var(--el-color-primary); -> bu eklenir
+    @include css-var-from-global(('button-text-color'), ('color-primary'));
+
+    // bununla property'ye değer atayabilirsin (hiyerarşik alıyor)
+    color: getCssVar('colors-neutral-light-2');
+
+    // bununla da property alınabililyor
+    font-size: map.get($select, 'font-size');
+}
+**/
 html,
 body,
 #main {
@@ -1230,6 +1245,39 @@ body {
   flex-basis: 100%;
   justify-content: center;
 }
+.page-footer .el-button:first-child {
+  --el-button-text-color: var(--el-color-secondary-light-9);
+  --el-button-bg-color: var(--el-color-secondary-light-1);
+  --el-button-border-color: var(--el-color-secondary-light-2);
+  --el-button-outline-color: var(--el-color-secondary-light-5);
+  --el-button-active-color: var(--el-color-secondary-dark-2);
+  --el-button-hover-text-color: var(--el-color-secondary-light-9);
+  --el-button-hover-link-text-color: var(--el-color-secondary-light-5);
+  --el-button-hover-bg-color: var(--el-color-white);
+  --el-button-hover-border-color: var(--el-color-secondary-light-3);
+  --el-button-active-bg-color: var(--el-color-secondary-light-2);
+  --el-button-active-border-color: var(--el-color-secondary-light-2);
+  --el-button-disabled-text-color: var(--el-color-white);
+  --el-button-disabled-bg-color: var(--el-color-secondary-light-1);
+  --el-button-disabled-border-color: var(--el-color-secondary-light-1);
+}
+.page-footer .el-button:first-child.is-plain, .page-footer .el-button:first-child.is-text, .page-footer .el-button:first-child.is-link {
+  --el-button-text-color: var(--el-color-secondary);
+  --el-button-disabled-text-color: var(--el-color-secondary-light-9);
+  --el-button-bg-color: var(--el-color-white);
+  --el-button-border-color: var(--el-color-secondary-light-5);
+  --el-button-hover-text-color: var(--el-color-secondary-light-4);
+  --el-button-hover-bg-color: var(--el-color-white);
+  --el-button-hover-border-color: var(--el-color-secondary-light-4);
+  --el-button-active-text-color: var(--el-color-secondary-light-6);
+  --el-button-active-bg-color: var(--el-color-white);
+  --el-button-active-border-color: var(--el-color-secondary-light-6);
+}
+.page-footer .el-button:first-child.is-plain.is-disabled, .page-footer .el-button:first-child.is-plain.is-disabled:hover, .page-footer .el-button:first-child.is-plain.is-disabled:focus, .page-footer .el-button:first-child.is-plain.is-disabled:active, .page-footer .el-button:first-child.is-text.is-disabled, .page-footer .el-button:first-child.is-text.is-disabled:hover, .page-footer .el-button:first-child.is-text.is-disabled:focus, .page-footer .el-button:first-child.is-text.is-disabled:active, .page-footer .el-button:first-child.is-link.is-disabled, .page-footer .el-button:first-child.is-link.is-disabled:hover, .page-footer .el-button:first-child.is-link.is-disabled:focus, .page-footer .el-button:first-child.is-link.is-disabled:active {
+  color: var(--el-color-secondary-light-2);
+  background-color: transparent;
+  border-color: var(--el-color-secondary-light-2);
+}
 
 .el-icon.more-icon {
   align-items: center;

package/dist/runtime/public/scss/theme.scss

@@ -8,6 +8,7 @@
 @use 'logo' as *;
 @use 'selectbox' as *;
 @use 'sass:map';
+@use 'element-plus/mixins/button' as *;
 
 // @use 'layers' as *;
 
@@ -38,6 +39,10 @@ body {
   .el-button {
     flex-basis: 100%;
     justify-content: center;
+
+    &:first-child {
+      @include button-variant('secondary');
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timus-networks/theme",
-  "version": "2.4.135",
+  "version": "2.4.136",
   "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
   "type": "module",
   "exports": {