@esportsplus/ui 0.45.4 → 0.46.0

package/build/themes/dark/button/scss/index.scss

@@ -1,2 +1,2 @@
-@layer themes {.button--primary,.button--secondary,.button--tertiary{--border-color-active:var(--color-primary-300);--color-default:var(--color-grey-500)}.button--form,.button--primary{--background-active:var(--color-primary-300);--background-default:var(--color-primary-300);--background-hover:var(--color-primary-300);--background-pressed:var(--color-primary-500)}.button--secondary{--background-default:var(--color-black-300);--background-hover:var(--color-primary-300);--background-pressed:var(--color-primary-500);--border-color:var(--background-color)}.button--tertiary{--border-color-active:var(--color-primary-300);--border-color-default:var(--color-black-300);--border-color-hover:var(--color-black-400);--border-color-pressed:var(--color-black-500)}}
+@layer themes {.button--form,.button--primary,.button--secondary,.button--tertiary{--border-color-active:var(--color-primary-300);--color-active:var(--color-white-400);--color-default:var(--color-grey-500);--color-hover:var(--color-white-400);--color-pressed:var(--color-grey-500);--font-weight:var(--font-weight-500)}.button--form,.button--primary{--background-active:var(--color-primary-300);--background-default:var(--color-primary-300);--background-hover:var(--color-primary-300);--background-pressed:var(--color-primary-500)}.button--form{--padding-horizontal:var(--size-500);--padding-vertical:var(--size-500);--width:100%}.button--secondary{--background-active:var(--color-black-300);--background-default:var(--color-black-300);--background-hover:var(--color-primary-300);--background-pressed:var(--color-primary-500);--border-color:var(--background-color)}.button--tertiary{--background-active:var(--color-black-300);--background-default:var(--color-black-400);--background-hover:var(--color-black-300);--background-pressed:var(--color-black-500);--border-color-active:var(--color-primary-300);--border-color-default:var(--color-black-300);--border-color-hover:var(--color-black-400);--border-color-pressed:var(--color-black-500)}}
 /*$vite$:1*/

package/build/themes/dark/index.d.ts

@@ -1,7 +1,5 @@
 export { default as alert } from './alert.js';
 export { default as back } from './back.js';
-export { default as button } from './button/index.js';
 export { default as input } from './input.js';
-export { default as link } from './link.js';
 export { default as select } from './select.js';
 export { default as textarea } from './textarea.js';

package/build/themes/dark/index.js

@@ -1,7 +1,5 @@
 export { default as alert } from './alert.js';
 export { default as back } from './back.js';
-export { default as button } from './button/index.js';
 export { default as input } from './input.js';
-export { default as link } from './link.js';
 export { default as select } from './select.js';
 export { default as textarea } from './textarea.js';

package/build/themes/dark/link/scss/index.scss

@@ -0,0 +1,2 @@
+@layer themes {.link--primary,.link--tooltip{--color-active:var(--color-white-400);--color-default:var(--color-grey-500);--color-hover:var(--color-white-400);--color-pressed:var(--color-grey-500);--font-weight:var(--font-weight-500);--gap-horizontal:0px;--gap-vertical:0px;align-items:center;gap:var(--gap-vertical)var(--gap-horizontal);flex-flow:row;display:flex}.link--tooltip{--background-active:var(--color-black-300);--background-default:var(--color-black-400);--background-hover:var(--color-black-300);--background-pressed:var(--color-black-500);--padding-horizontal:var(--size-500);--padding-vertical:var(--size-500);white-space:nowrap}}
+/*$vite$:1*/

package/package.json

@@ -4,7 +4,7 @@
     "@esportsplus/action": "^0.0.58",
     "@esportsplus/queue": "^0.1.0",
     "@esportsplus/reactivity": "^0.18.1",
-    "@esportsplus/template": "^0.26.4",
+    "@esportsplus/template": "^0.26.5",
     "@esportsplus/utilities": "^0.25.0",
     "@esportsplus/vite": "^0.10.5",
     "modern-normalize": "^3.0.1"
@@ -34,10 +34,12 @@
       "types": "./build/themes/dark/index.d.ts",
       "default": "./build/themes/dark/index.js"
     },
+    "./themes/dark/*.scss": "./build/themes/dark/*/scss/index.scss",
     "./themes/light": {
       "types": "./build/themes/light/index.d.ts",
       "default": "./build/themes/light/index.js"
     },
+    "./themes/light/*.scss": "./build/themes/light/*/scss/index.scss",
     "./tokens.scss": "./tokens.scss",
     "./*.scss": "./build/components/*/scss/index.scss",
     "./*": {
@@ -53,7 +55,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.45.4",
+  "version": "0.46.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/themes/dark/button/scss/index.scss

@@ -1,9 +1,14 @@
 .button {
+    &--form,
     &--primary,
     &--secondary,
     &--tertiary {
         --border-color-active: var(--color-primary-300);
+        --color-active: var(--color-white-400);
         --color-default: var(--color-grey-500);
+        --color-hover: var(--color-white-400);
+        --color-pressed: var(--color-grey-500);
+        --font-weight: var(--font-weight-500);
     }
 
     &--form,
@@ -14,7 +19,14 @@
         --background-pressed: var(--color-primary-500);
     }
 
+    &--form {
+        --padding-horizontal: var(--size-500);
+        --padding-vertical: var(--size-500);
+        --width: 100%;
+    }
+
     &--secondary {
+        --background-active: var(--color-black-300);
         --background-default: var(--color-black-300);
         --background-hover: var(--color-primary-300);
         --background-pressed: var(--color-primary-500);
@@ -22,6 +34,10 @@
     }
 
     &--tertiary {
+        --background-active: var(--color-black-300);
+        --background-default: var(--color-black-400);
+        --background-hover: var(--color-black-300);
+        --background-pressed: var(--color-black-500);
         --border-color-active: var(--color-primary-300);
         --border-color-default: var(--color-black-300);
         --border-color-hover: var(--color-black-400);

package/src/themes/dark/index.ts

@@ -1,7 +1,5 @@
 export { default as alert } from './alert';
 export { default as back } from './back';
-export { default as button } from './button';
 export { default as input } from './input';
-export { default as link } from './link';
 export { default as select } from './select';
 export { default as textarea } from './textarea';

package/src/themes/dark/link/scss/index.scss

@@ -0,0 +1,26 @@
+.link {
+    &--primary,
+    &--tooltip {
+        --color-active: var(--color-white-400);
+        --color-default: var(--color-grey-500);
+        --color-hover: var(--color-white-400);
+        --color-pressed: var(--color-grey-500);
+        --font-weight: var(--font-weight-500);
+        --gap-horizontal: 0px;
+        --gap-vertical: 0px;
+        align-items: center;
+        display: flex;
+        flex-flow: row;
+        gap: var(--gap-vertical) var(--gap-horizontal);
+    }
+
+    &--tooltip {
+        --background-active: var(--color-black-300);
+        --background-default: var(--color-black-400);
+        --background-hover: var(--color-black-300);
+        --background-pressed: var(--color-black-500);
+        --padding-horizontal: var(--size-500);
+        --padding-vertical: var(--size-500);
+        white-space: nowrap;
+    }
+}

package/build/themes/dark/button/index.d.ts

@@ -1,16 +0,0 @@
-import './scss/index.scss';
-declare const _default: {
-    form: {
-        class: string;
-    };
-    primary: {
-        class: string;
-    };
-    secondary: {
-        class: string;
-    };
-    tertiary: {
-        class: string;
-    };
-};
-export default _default;

package/build/themes/dark/button/index.js

@@ -1,14 +0,0 @@
-import './scss/index.scss';
-const primary = {
-    class: `button button--primary --color-white --text-bold --text-uppercase`,
-};
-const secondary = {
-    class: `button button--secondary --background-black --color-white --text-bold`
-};
-const tertiary = {
-    class: `button button--tertiary --background-black --color-white --text-bold`
-};
-const form = {
-    class: `${primary.class} --padding-500 --width-full`
-};
-export default { form, primary, secondary, tertiary };

package/build/themes/dark/link.d.ts

@@ -1,11 +0,0 @@
-declare const _default: {
-    primary: {
-        class: string;
-        style: string;
-    };
-    tooltip: {
-        class: string;
-        style: string;
-    };
-};
-export default _default;

package/build/themes/dark/link.js

@@ -1,9 +0,0 @@
-const primary = {
-    class: 'link --color-white --flex-row --flex-vertical --text-bold',
-    style: '--color-default: var(--color-grey-500);'
-};
-const tooltip = {
-    class: `${primary.class} --background-black --padding-500`,
-    style: `${primary.style} white-space: nowrap;`
-};
-export default { primary, tooltip };

package/src/themes/dark/button/index.ts

@@ -1,22 +0,0 @@
-import './scss/index.scss';
-
-
-const primary = {
-    class: `button button--primary --color-white --text-bold --text-uppercase`,
-};
-
-const secondary = {
-    class: `button button--secondary --background-black --color-white --text-bold`
-};
-
-const tertiary = {
-    class: `button button--tertiary --background-black --color-white --text-bold`
-};
-
-
-const form = {
-    class: `${primary.class} --padding-500 --width-full`
-};
-
-
-export default { form, primary, secondary, tertiary };

package/src/themes/dark/link.ts

@@ -1,12 +0,0 @@
-const primary = {
-    class: 'link --color-white --flex-row --flex-vertical --text-bold',
-    style: '--color-default: var(--color-grey-500);'
-};
-
-const tooltip = {
-    class: `${primary.class} --background-black --padding-500`,
-    style: `${primary.style} white-space: nowrap;`
-};
-
-
-export default { primary, tooltip };