@acorex/styles 4.0.24 → 5.0.4

package/index.scss

@@ -1,48 +1,2 @@
-@import "./scss/ax-icon/style.scss";
-
-@import "./scss/bases/accessiblity.scss";
-@import "./scss/bases/background.scss";
-@import "./scss/bases/border.scss";
-@import "./scss/bases/effects.scss";
-@import "./scss/bases/flexbox-and-grid.scss";
-@import "./scss/bases/interactivity.scss";
-@import "./scss/bases/layout.scss";
-
-@import "./scss/bases/root.scss";
-
-@import "./scss/bases/sizing.scss";
-@import "./scss/bases/skeleton.scss";
-@import "./scss/bases/spacing.scss";
-@import "./scss/bases/svg.scss";
-@import "./scss/bases/table.scss";
-@import "./scss/bases/transform.scss";
-@import "./scss/bases/transition-and-animation.scss";
-@import "./scss/bases/typography.scss";
-
-@import "./scss/components/alert.scss";
-@import "./scss/components/badge.scss";
-@import "./scss/components/button.scss";
-@import "./scss/components/checkbox.scss";
-@import "./scss/components/calendar.scss";
-@import "./scss/components/datepicker.scss";
-@import "./scss/components/dialog.scss";
-@import "./scss/components/drawer.scss";
-@import "./scss/components/dropdown.scss";
-@import "./scss/components/editor-container.scss";
-@import "./scss/components/input.scss";
-@import "./scss/components/radio.scss";
-@import "./scss/components/switch.scss";
-@import "./scss/components/selectbox.scss";
-@import "./scss/components/table.scss";
-@import "./scss/components/tabs.scss";
-@import "./scss/components/label.scss";
-@import "./scss/components/selection-list.scss";
-@import "./scss/components/side-menu.scss";
-@import "./scss/components/list.scss";
-@import "./scss/components/popup.scss";
-@import "./scss/components/text-box.scss";
-@import "./scss/components/toast.scss";
-@import "./scss/components/tooltip.scss";
-@import "./scss/components/datapager.scss";
-@import "./scss/components/loading.scss";
-@import "./scss/components/carousel.scss";
+@import "./src/base/index.scss";
+@import "./src/components/index.scss";

package/package.json

@@ -1,11 +1,11 @@
-{
-  "name": "@acorex/styles",
-  "version": "4.0.24",
-  "description": "",
-  "main": "index.scss",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "Ali Safari",
-  "license": "ISC"
-}
+{
+    "name": "@acorex/styles",
+    "version": "5.0.4",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "",
+    "license": "ISC"
+}

package/src/base/_colors.scss

@@ -0,0 +1,16 @@
+@import "../variables/colors";
+@mixin colors() {
+    @each $name, $color in $theme-colors {
+        @if (type-of($color) == "map") {
+            @each $subname, $variant in $color {
+                @if ($subname != "") {
+                    --ax-color-#{$name}-#{$subname}: #{$variant};
+                } @else {
+                    --ax-color-#{$name}: #{$variant};
+                }
+            }
+        } @else {
+            --ax-color-#{$name}: #{$color};
+        }
+    }
+}

package/src/base/index.scss

@@ -0,0 +1,7 @@
+@import "./colors";
+
+:root {
+    --ax-base-size: 8px;
+    --ax-base-ratio: 5;
+    @include colors();
+}

package/src/components/_alert.scss

@@ -0,0 +1,148 @@
+@import "../variables/mixins";
+@layer components {
+    .ax-alert {
+        @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-baseline ax-rounded;
+        .ax-alert-icon {
+            @apply ax-text-xl ax-align-text-bottom;
+            @include respond(mobile) {
+                @apply ax-text-2xl;
+            }
+        }
+        .ax-alert-body {
+            @apply ax-ml-2 ax-flex-1;
+            .ax-alert-title {
+                @apply ax-inline-flex ax-text-sm ax-font-bold ax-mb-2.5;
+                @include respond(mobile) {
+                    @apply ax-text-base;
+                }
+                a {
+                    @apply ax-text-current ax-font-bold;
+                }
+            }
+            .ax-alert-content {
+                @apply ax-block ax-text-sm;
+                @include respond(mobile) {
+                    @apply ax-text-base;
+                }
+                ul {
+                    @apply ax-my-2 ax-ms-5 ax-list-disc;
+                }
+                a {
+                    @apply ax-text-current ax-font-bold ax-underline;
+                    &:hover {
+                        @apply ax-underline;
+                    }
+                }
+            }
+            .ax-alert-footer {
+                .ax-alert-buttons {
+                    @apply ax-flex ax-mt-2;
+                    .ax-alert-button {
+                        @apply ax-font-bold ax-me-4 ax-cursor-pointer ax-rounded;
+                    }
+                }
+            }
+        }
+        .ax-alert-suffix {
+            .ax-alert-buttons {
+                .ax-alert-button {
+                    @apply ax-font-bold ax-me-0.5 ax-cursor-pointer ax-rounded;
+                    i {
+                        @apply ax-mx-1;
+                    }
+                }
+            }
+        }
+        &.ax-primary {
+            @apply ax-bg-primary-50 ax-text-primary;
+            .ax-alert-content {
+                @apply ax-block ax-text-sm;
+            }
+            .ax-alert-title {
+                @apply ax-text-primary-700;
+            }
+            .ax-alert-button {
+                &:hover {
+                    @apply ax-text-primary-800;
+                }
+            }
+        }
+        &.ax-secondary {
+            @apply ax-bg-secondary-50 ax-text-secondary;
+            .ax-alert-title {
+                @apply ax-text-secondary-700;
+            }
+            .ax-alert-button {
+                &:hover {
+                    @apply ax-text-secondary-800;
+                }
+            }
+        }
+        &.ax-success {
+            @apply ax-bg-success-50 ax-text-success;
+            .ax-alert-title {
+                @apply ax-text-success-700;
+            }
+            .ax-alert-button {
+                &:hover {
+                    @apply ax-text-success-800;
+                }
+            }
+        }
+        &.ax-warning {
+            @apply ax-bg-warning-50 ax-text-warning;
+            .ax-alert-title {
+                @apply ax-text-warning-700;
+            }
+            .ax-alert-button {
+                &:hover {
+                    @apply ax-text-warning-800;
+                }
+            }
+        }
+        &.ax-danger {
+            @apply ax-bg-danger-50 ax-text-danger;
+            .ax-alert-title {
+                @apply ax-text-danger-700;
+            }
+            .ax-alert-button {
+                &:hover {
+                    @apply ax-text-danger-800;
+                }
+            }
+        }
+        &.ax-info {
+            @apply ax-bg-info-50 ax-text-info;
+            .ax-alert-title {
+                @apply ax-text-info-700;
+            }
+            .ax-alert-button {
+                &:hover {
+                    @apply ax-text-info-800;
+                }
+            }
+        }
+        &.ax-light {
+            @apply ax-bg-gray-50 ax-text-light-fore;
+            .ax-alert-title {
+                @apply ax-text-light-fore;
+            }
+            .ax-alert-button {
+                &:hover {
+                    @apply ax-text-light-800;
+                }
+            }
+        }
+        &.ax-dark {
+            @apply ax-bg-dark ax-text-dark-fore;
+            .ax-alert-title {
+                @apply ax-text-dark-fore;
+            }
+            .ax-alert-button {
+                &:hover {
+                    @apply ax-bg-dark;
+                }
+            }
+        }
+    }
+}

package/src/components/_badge.scss

@@ -0,0 +1,39 @@
+@layer components {
+    .ax-badge {
+        @apply ax-flex ax-items-center ax-justify-center ax-max-w-max ax-py-1 ax-px-2 ax-rounded ax-cursor-pointer ax-text-sm ax-whitespace-nowrap;
+        .ax-ic {
+            @apply ax-text-sm ax-ms-1;
+        }
+        &.ax-badge-rounded-full {
+            @apply ax-rounded-full;
+        }
+        &.ax-primary {
+            @apply ax-bg-primary-100 ax-text-primary;
+        }
+        &.ax-secondary {
+            @apply ax-bg-secondary-100 ax-text-secondary;
+        }
+        &.ax-warning {
+            @apply ax-bg-warning-100 ax-text-warning;
+        }
+        &.ax-danger {
+            @apply ax-bg-danger-100 ax-text-danger;
+        }
+        &.ax-success {
+            @apply ax-bg-success-100 ax-text-success;
+        }
+        &.ax-info {
+            @apply ax-bg-info-100 ax-text-info;
+        }
+        &.ax-light {
+            @apply ax-bg-light-100 ax-text-light-fore;
+        }
+        &.ax-dark {
+            @apply ax-bg-dark-100 ax-text-dark;
+        }
+        &.ax-sm {
+        }
+        &.ax-lg {
+        }
+    }
+}