winduum 2.0.0-next.23 → 2.0.0-next.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.0.0-next.23",
+  "version": "2.0.0-next.25",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",
@@ -47,6 +47,7 @@
     "tailwind.config.js",
     "dist",
     "src",
+    "tailwindcss",
     "plugin",
     "types"
   ],
@@ -58,6 +59,7 @@
       "types": "./plugin/types.d.ts"
     },
     "./src/*": "./src/*",
+    "./tailwindcss/*": "./tailwindcss/*",
     "./dist/*": "./dist/*",
     "./plugin/*": "./plugin/*",
     "./src/components/carousel": {

package/src/base/config/font.css

@@ -2,12 +2,15 @@
   --default-font-family: ui-sans-serif, system-ui, -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-family-primary: var(--default-font-family);
   --font-family-secondary: var(--default-font-family);
+  --font-weight-black: 900;
+  --font-weight-extrabold: 800;
   --font-weight-bold: 700;
   --font-weight-semibold: 600;
   --font-weight-medium: 500;
   --font-weight-normal: 400;
   --font-weight-light: 300;
-  --font-weight-thin: 200;
+  --font-weight-extralight: 200;
+  --font-weight-thin: 100;
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
   --font-size-base: 1rem;

package/src/base/config/transition.css

@@ -1,10 +1,4 @@
 :root, :host {
-  --default-transition-duration: 150ms;
-  --default-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility, display, overlay;
-  --transition-timing-function-linear: linear;
-  --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
-  --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
-  --transition-timing-function-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --transition-all: all var(--default-transition-duration) var(--transition-timing-function-in-out);
   --transition-color: color var(--default-transition-duration) var(--transition-timing-function-in-out);
   --transition-background: background var(--default-transition-duration) var(--transition-timing-function-in-out);
@@ -14,7 +8,7 @@
   --transition-shadow: box-shadow var(--default-transition-duration) var(--transition-timing-function-in-out);
   --transition-display: display var(--default-transition-duration) var(--transition-timing-function-in-out);
   --transition-overlay: overlay var(--default-transition-duration) var(--transition-timing-function-in-out);
-  --view-transition-main-duration: 0.15s;
+  --view-transition-main-duration: var(--default-transition-duration);
 
   @media (prefers-reduced-motion) {
     --default-transition-duration: 0;

package/src/base/config.css

@@ -1,6 +1,5 @@
 @import "config/font.css";
 @import "config/mask.css";
 @import "config/rounded.css";
-@import "config/spacing.css";
 @import "config/transition.css";
 @import "config/z.css";

package/src/base/defaults.css

@@ -63,3 +63,7 @@
   color: var(--color-main);
   accent-color: var(--color-accent);
 }
+
+[hidden] {
+  display: none !important;
+}

package/src/base/index.css

@@ -1,6 +1,4 @@
-@import "reset.css";
 @import "defaults.css";
-@import "defaults-tw.css";
 @import "breakpoints.css";
 @import "config.css";
 @import "keyframes.css";

package/src/base/keyframes.css

@@ -4,23 +4,6 @@
   }
 }
 
-@keyframes ripple {
-  to {
-    transform: scale(2.5);
-    opacity: 0%;
-  }
-}
-
-@keyframes move-indeterminate {
-  from {
-    background-position: 200% 0;
-  }
-
-  to {
-    background-position: -200% 0;
-  }
-}
-
 @keyframes fade-in {
   from {
     opacity: 0%;

package/src/components/button/bordered.css

@@ -1,15 +1,12 @@
 .x-button:is(.bordered) {
   --x-button-disabled-background-color-opacity: 0%;
   --x-button-disabled-background-color-mix: transparent;
-  --x-button-disabled-border-color-opacity: 30%;
   --x-button-disabled-color: var(--color-accent);
   --x-button-active-background-color-opacity: 20%;
   --x-button-active-background-color-mix: transparent;
-  --x-button-active-border-color-opacity: 30%;
   --x-button-active-color: var(--color-accent);
   --x-button-hover-background-color-opacity: 10%;
   --x-button-hover-background-color-mix: transparent;
-  --x-button-hover-border-color-opacity: 30%;
   --x-button-hover-color: var(--color-accent);
   --x-button-focus-outline-offset: 0px;
   --x-button-border-width: 1px;

package/src/components/progress/index.css

@@ -1,4 +1,5 @@
 @import "props/default.css";
+@import "keyframes/default.css";
 @import "default.css";
 @import "meter.css";
 @import "sm.css";

package/src/components/progress/keyframes/default.css

@@ -0,0 +1,9 @@
+@keyframes move-indeterminate {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}

package/src/main.css

@@ -1,2 +1,4 @@
+@import "base/reset.css";
 @import "base/index.css";
 @import "components/index.css";
+@import "utilities/index.css";

package/src/tailwind.css

@@ -2,4 +2,3 @@
 @import "tailwindcss/components.css";
 @import "tailwindcss/utilities.css";
 @import "tailwindcss/variants.css";
-@import "utilities/index.css" layer(components);

package/src/test.css

@@ -1,7 +1,9 @@
+@import "base/reset.css";
+@import "../tailwindcss/base/defaults.css";
+@import "tailwindcss/base.css";
 @import "base/index.css";
 @import "components/index.css" layer(components);
 @import "utilities/index.css" layer(components);
-@import "tailwindcss/base.css";
 @import "tailwindcss/components.css";
 @import "tailwindcss/utilities.css";
 @import "tailwindcss/variants.css";

package/src/utilities/animation.css

@@ -1,4 +1,4 @@
-@utility animation {
+.animation {
   animation-duration: var(--default-animation-duration, var(--default-transition-duration, 150ms));
   animation-fill-mode: both;
 }

package/src/utilities/index.css

@@ -1,4 +1,3 @@
-@import "common.css";
 @import "container/index.css";
 @import "divider.css";
 @import "ripple/index.css";

package/src/utilities/ripple/default.css

@@ -0,0 +1,15 @@
+.ripple {
+  inline-size: var(--ripple-size, 2rem);
+  block-size: var(--ripple-size, 2rem);
+  background-color:
+      color-mix(
+          in var(--ripple-background-color-space, srgb),
+          var(--ripple-background-color, currentColor) var(--ripple-background-color-opacity, 40%),
+          var(--ripple-background-color-mix, transparent)
+      );
+  animation-duration: var(--ripple-animation-duration, 1s);
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  pointer-events: none;
+}

package/src/utilities/ripple/index.css

@@ -1,15 +1,2 @@
-.ripple {
-  inline-size: var(--ripple-size, 2rem);
-  block-size: var(--ripple-size, 2rem);
-  background-color:
-    color-mix(
-      in var(--ripple-background-color-space, srgb),
-      var(--ripple-background-color, currentColor) var(--ripple-background-color-opacity, 40%),
-      var(--ripple-background-color-mix, transparent)
-    );
-  animation-duration: var(--ripple-animation-duration, 1s);
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  pointer-events: none;
-}
+@import "keyframes/default.css";
+@import "default.css";

package/src/utilities/ripple/keyframes/default.css

@@ -0,0 +1,6 @@
+@keyframes ripple {
+  to {
+    transform: scale(2.5);
+    opacity: 0%;
+  }
+}

package/tailwindcss/base/config/transition.css

@@ -0,0 +1,8 @@
+:root, :host {
+  --default-transition-duration: 150ms;
+  --default-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility, display, overlay;
+  --transition-timing-function-linear: linear;
+  --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
+  --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
+  --transition-timing-function-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}

package/{src/base/config/tw.css → tailwindcss/base/config.css}

@@ -1,30 +1,21 @@
 @theme {
+  --default-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility, display, overlay;
   --font-family-primary: var(--default-font-family);
   --font-family-secondary: var(--default-font-family);
+  --font-weight-black: 900;
+  --font-weight-extrabold: 800;
   --font-weight-bold: 700;
   --font-weight-semibold: 600;
   --font-weight-medium: 500;
   --font-weight-normal: 400;
   --font-weight-light: 300;
-  --font-weight-thin: 200;
+  --font-weight-extralight: 200;
+  --font-weight-thin: 100;
   --z-index-10: 10;
   --z-index-20: 20;
   --z-index-30: 30;
   --z-index-40: 40;
   --z-index-50: 50;
-  --spacing-xs: 0.25rem;
-  --spacing-sm: 0.5rem;
-  --spacing-md: 0.75rem;
-  --spacing-lg: 1rem;
-  --spacing-xl: 1.25rem;
-  --spacing-2xl: 1.5rem;
-  --spacing-3xl: 1.75rem;
-  --spacing-4xl: 2rem;
-  --spacing-5xl: 2.5rem;
-  --spacing-6xl: 3rem;
-  --spacing-7xl: 3.5rem;
-  --spacing-8xl: 4rem;
-  --spacing-9xl: 5rem;
   --radius: var(--radius-xl);
   --radius-full: calc(infinity * 1px);
 }

package/src/base/config/spacing.css

@@ -1,15 +0,0 @@
-:root, :host {
-  --spacing-xs: 0.25rem;
-  --spacing-sm: 0.5rem;
-  --spacing-md: 0.75rem;
-  --spacing-lg: 1rem;
-  --spacing-xl: 1.25rem;
-  --spacing-2xl: 1.5rem;
-  --spacing-3xl: 1.75rem;
-  --spacing-4xl: 2rem;
-  --spacing-5xl: 2.5rem;
-  --spacing-6xl: 3rem;
-  --spacing-7xl: 3.5rem;
-  --spacing-8xl: 4rem;
-  --spacing-9xl: 5rem;
-}

package/src/utilities/common.css

@@ -1,3 +0,0 @@
-[hidden] {
-  display: none;
-}