winduum 0.1.0

package/src/styles/Base/config.css

@@ -0,0 +1,87 @@
+:root {
+  --font-primary: "Poppins", sans-serif;
+  --font-secondary: "Poppins", sans-serif;
+}
+
+:root {
+  --color-google: 49 45 45;
+  --color-linkedin: 40 103 178;
+  --color-youtube: 255 0 0;
+  --color-instagram: 193 53 132;
+  --color-twitter: 29 161 242;
+  --color-facebook: 24 119 242;
+  --color-apple: 0 0 0;
+}
+
+:root {
+  --container-width: 80rem;
+  --container-width-sm: 50rem;
+  --container-padding: 5vw;
+  --container-padding-calc: max(calc(50vw - (var(--container-width) / 2) + var(--container-padding)), var(--container-padding));
+}
+
+:root {
+  --font-bold: 700;
+  --font-semibold: 600;
+  --font-medium: 500;
+  --font-normal: 400;
+  --font-light: 300;
+  --font-thin: 200;
+}
+
+:root {
+  --z-10: 10;
+  --z-20: 20;
+  --z-30: 30;
+  --z-40: 40;
+  --z-50: 50;
+}
+
+:root {
+  --rounded: 0.75rem;
+  --rounded-xs: 0.5rem;
+  --rounded-sm: 0.875rem;
+  --rounded-base: 1rem;
+  --rounded-md: 1.125rem;
+  --rounded-lg: 1.5rem;
+  --rounded-xl: 3rem;
+  --rounded-2xl: 6rem;
+  --rounded-3xl: 8rem;
+  --rounded-full: 9999px;
+}
+
+:root {
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 0.875rem;
+  --spacing-base: 1rem;
+  --spacing-md: 1.125rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 3rem;
+  --spacing-2xl: 6rem;
+  --spacing-3xl: 8rem;
+}
+
+:root {
+  --transition-duration: 0.15s;
+  --transition-color: color var(--transition-duration) ease;
+  --transition-background: background var(--transition-duration) ease;
+  --transition-opacity: opacity var(--transition-duration) ease;
+  --transition-transform: transform var(--transition-duration) ease;
+  --transition-border: border-color var(--transition-duration) ease;
+  --transition-shadow: box-shadow var(--transition-duration) ease;
+
+  @media (prefers-reduced-motion) {
+    --transition-duration: 0;
+  }
+}
+
+@custom-media --media-xs (min-width: 22.5em);
+@custom-media --media-sm (min-width: 26em);
+@custom-media --media-md (min-width: 48em);
+@custom-media --media-lg (min-width: 60em);
+@custom-media --media-xl (min-width: 76em);
+@custom-media --media-2xl (min-width: 82em);
+@custom-media --media-3xl (min-width: 88em);
+@custom-media --media-4xl (min-width: 100em);
+@custom-media --media-xxl (min-width: 126em);
+@custom-media --media-2xxl (min-width: 158em);

package/src/styles/Base/default.css

@@ -0,0 +1,23 @@
+::selection {
+  color: rgb(var(--color-light));
+  background-color: rgb(var(--color-accent));
+}
+
+* {
+  box-sizing: border-box;
+  outline: none;
+  -webkit-tap-highlight-color: rgb(255 255 255 / 0);
+}
+
+:where([hidden]) {
+  display: none;
+}
+
+:where(svg) {
+  stroke-width: 1.5;
+}
+
+:where(hr) {
+  display: block;
+  border-top: 1px solid rgb(var(--color-current) / var(--tw-border-opacity, 1));
+}

package/src/styles/Base/icons.css

@@ -0,0 +1,9 @@
+:root {
+  --icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>') no-repeat 50% 50% / contain;
+  --icon-radio: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>') no-repeat 50% 50% / contain;
+  --icon-chevron-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>') no-repeat 50% 50% / contain;
+  --icon-chevron-left: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>') no-repeat 50% 50% / contain;
+  --icon-angle-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" /></svg>') no-repeat 50% 50% / contain;
+  --icon-angle-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>') no-repeat 50% 50% / contain;
+  --icon-upload: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>') no-repeat 50% 50% / contain;
+}

package/src/styles/Base/keyframes.css

@@ -0,0 +1,188 @@
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes move-indeterminate {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes fade-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-5rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fade-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(5rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fade-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-2rem);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-out-left {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(-5rem);
+  }
+}
+
+@keyframes fade-out-right {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(5rem);
+  }
+}
+
+@keyframes fade-out-up {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-2rem);
+  }
+}
+
+@keyframes fade-out-down {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in-down {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-up {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slide-in-up {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-down {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes ripple {
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+@keyframes loading-skeleton {
+  100% {
+    background-position: 250% 0;
+  }
+}

package/src/styles/Base/reset.css

@@ -0,0 +1,98 @@
+/***
+    The new CSS reset - version 1.7.3 (last updated 7.8.2022)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+*:where(:not(html, iframe, canvas, img, svg, video, audio, svg *, symbol *)) {
+  all: unset;
+  display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu {
+  list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+  max-width: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input, textarea {
+  user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
+:where([contenteditable]:not([contenteditable="false"])) {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
+}
+
+/* apply default cursor */
+:where(html) {
+  cursor: default;
+}
+
+/* apply text cursor */
+:where(input, textarea) {
+  cursor: text;
+}
+
+/* apply pointer cursor */
+:where(a[href], button) {
+  cursor: pointer;
+}
+
+/* fix firefox svg */
+:where(svg, use, path, symbol) {
+  all: revert-layer;
+}

package/src/styles/Base/tailwind/base.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .animation {
+    animation-duration: var(--transition-duration);
+    animation-fill-mode: both;
+  }
+
+  :where(.col) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--container-padding);
+    padding-right: var(--container-padding);
+    max-width: var(--container-width);
+
+    &.is-sm {
+      --container-width: var(--container-width-sm);
+    }
+  }
+}

package/src/styles/Base/theme/dark.css

@@ -0,0 +1,9 @@
+:root.dark {
+  --color-default: 201 209 217;
+  --color-invert: 14 17 22;
+  --color-secondary: 39 41 46;
+  --color-background: 25 26 27;
+  --color-background-100: 14 15 16;
+  --color-background-200: 26 32 38;
+  --color-background-300: 30 36 46;
+}

package/src/styles/Base/theme/default.css

@@ -0,0 +1,17 @@
+:root {
+  --color-accent: var(--color-primary);
+  --color-current: var(--color-default);
+  --color-default: 17 19 21;
+  --color-primary: 3 138 255;
+  --color-secondary: 69 71 72;
+  --color-light: 255 255 255;
+  --color-dark: 17 19 21;
+  --color-success: 33 154 67;
+  --color-error: 254 50 75;
+  --color-warning: 254 179 53;
+  --color-info: 45 168 234;
+  --color-background: 255 255 255;
+  --color-background-100: 249 250 252;
+  --color-background-200: 235 235 235;
+  --color-background-300: 225 225 225;
+}

package/src/styles/Components/+.css

@@ -0,0 +1,4 @@
+@import "Dialog.css";
+@import "Drawer.css";
+@import "Dropdown.css";
+@import "Table.css";

package/src/styles/Components/Dialog.css

@@ -0,0 +1,5 @@
+@layer utilities {
+  :where(.c-dialog) {
+
+  }
+}

package/src/styles/Components/Drawer.css

@@ -0,0 +1,5 @@
+@layer utilities {
+  :where(.c-drawer) {
+
+  }
+}

package/src/styles/Components/Dropdown.css

@@ -0,0 +1,5 @@
+@layer utilities {
+  :where(.c-dropdown) {
+
+  }
+}

package/src/styles/Components/Table.css

@@ -0,0 +1,5 @@
+@layer utilities {
+  :where(.c-table) {
+
+  }
+}

package/src/styles/Libraries/+.css

@@ -0,0 +1,3 @@
+@import "Dialog.css";
+@import "Hint.css";
+

package/src/styles/Libraries/Dialog.css

@@ -0,0 +1,5 @@
+@layer utilities {
+  :where(.lib-dialog) {
+
+  }
+}

package/src/styles/Libraries/Hint.css

@@ -0,0 +1,5 @@
+@layer utilities {
+  :where(.lib-hint) {
+
+  }
+}

package/src/styles/Ui/+.css

@@ -0,0 +1,14 @@
+@import "Badge.css";
+@import "Btn.css";
+@import "Checkbox.css";
+@import "Heading.css";
+@import "Image.css";
+@import "Input.css";
+@import "Link.css";
+@import "Notice.css";
+@import "Progress.css";
+@import "Radio.css";
+@import "Select.css";
+@import "Switch.css";
+@import "Text.css";
+@import "Title.css";

package/src/styles/Ui/Badge.css

@@ -0,0 +1,111 @@
+@layer utilities {
+  :where(.ui-badge) {
+    --color-current: var(--color-light);
+    --ui-badge-width: max-content;
+    --ui-badge-height: 1.5rem;
+    --ui-badge-py: 0;
+    --ui-badge-px: 0.5rem;
+    --ui-badge-border-radius: var(--rounded-xs);
+    --ui-badge-font-size: 0.75rem;
+    --ui-badge-font-weight: var(--font-normal);
+    --ui-badge-bg: rgb(var(--color-accent) / var(--ui-badge-bg-opacity));
+    --ui-badge-bg-opacity: var(--tw-bg-opacity, 1);
+    --ui-badge-color: rgb(var(--color-current) / var(--ui-badge-color-opacity));
+    --ui-badge-color-opacity: var(--tw-text-opacity, 1);
+    --ui-badge-outline-width: 1px;
+    --ui-badge-outline-opacity: 0.75;
+    --ui-badge-icon-font-size: 0.875rem;
+    --ui-badge-gap: 0.25rem;
+    --ui-badge-focus-opacity: 0.3;
+    --ui-badge-hover-opacity: 0.8;
+
+    width: var(--ui-badge-width);
+    height: var(--ui-badge-height);
+    padding: var(--ui-badge-py) var(--ui-badge-px);
+    border-radius: var(--ui-badge-border-radius);
+    font-size: var(--ui-badge-font-size);
+    font-weight: var(--ui-badge-font-weight);
+    background-color: var(--ui-badge-bg);
+    color: var(--ui-badge-color);
+    display: inline-flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    white-space: nowrap;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 0;
+    gap: var(--ui-badge-gap);
+    transition: var(--transition-opacity);
+
+    & :where(svg) {
+      width: 1em;
+      height: 1em;
+      font-size: var(--ui-badge-icon-font-size);
+    }
+
+    &:where(.is-outline) {
+      outline: var(--ui-badge-outline-width) solid rgb(var(--color-accent) / var(--ui-badge-outline-opacity));
+      outline-offset: calc(var(--ui-badge-outline-width) * -1);
+    }
+
+    &:where(.is-outline, .is-muted) {
+      --color-current: var(--color-accent);
+      --ui-badge-bg: transparent;
+    }
+
+    &:where(.is-muted) {
+      background-color: rgb(var(--color-current) / 0.1);
+    }
+
+    &:where(.is-square, .is-circle) {
+      --ui-badge-px: var(--ui-badge-py);
+      --ui-badge-width: var(--ui-badge-height);
+    }
+
+    &:where(.is-circle) {
+      --ui-badge-border-radius: var(--rounded-full);
+    }
+
+    &:where(.is-sm) {
+      --ui-badge-height: 1.25rem;
+      --ui-badge-font-size: 0.625rem;
+    }
+
+    &:where(.is-lg) {
+      --ui-badge-height: 1.75rem;
+    }
+
+    &:where([href], button) {
+      &:hover {
+        @media (hover: hover) and (pointer: fine) {
+          opacity: var(--ui-badge-hover-opacity);
+        }
+      }
+
+      &:focus-visible {
+        z-index: 2;
+        box-shadow:
+          0 0 0 0 rgb(var(--color-current)),
+          0 0 0 max(2px, var(--ui-badge-outline-width)) rgb(var(--color-accent) / var(--ui-badge-focus-opacity));
+      }
+    }
+  }
+
+  :where(.ui-badge-group) {
+    display: flex;
+
+    & :where(.ui-badge) {
+      &:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        margin-left: calc(var(--ui-badge-outline-width) * -1);
+      }
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}