@acorex/styles 6.1.12 → 7.0.1

package/src/shared/_list.scss

@@ -0,0 +1,134 @@
+@import "../mixins/index.scss";
+
+.ax-list {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    font-size: 0.875rem;
+    background-color: rgb(var(--ax-color-surface));
+
+    @include media("desktop") {
+        max-height: 320px;
+    }
+
+    .ax-header,
+    .ax-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: rgb(var(--ax-color-surface));
+        border-color: rgb(var(--ax-color-border-default));
+    }
+
+    .ax-footer {
+        border-top: 1px solid;
+    }
+
+    .ax-content {
+        flex: 1 1 0%;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        &.ax-list-items-container {
+            padding-top: 0.5rem;
+            padding-bottom: 0.5rem;
+            overflow-y: auto;
+            height: 100%;
+
+            &.ax-vertical {
+                display: grid;
+                grid-template-columns: repeat(1, minmax(0, 1fr));
+
+                &.ax-divide {
+                    border-top: 1px solid;
+                    border-bottom: 1px solid;
+                }
+            }
+
+            &.ax-default {
+                cursor: pointer;
+
+                .ax-list-item-group {
+                    & > span {
+                        font-weight: bold;
+                        display: flex;
+                        align-items: center;
+                        padding: 0.75rem;
+                    }
+
+                    & > ul {
+                        padding-left: 0.75rem;
+                        padding-right: 0.75rem;
+                    }
+                    .ax-list-item {
+                        border-radius: var(--ax-rounded-border-default);
+                        margin-bottom: 0.2rem;
+                    }
+                }
+
+                .ax-list-item {
+                    padding-top: 0.5rem;
+                    padding-bottom: 0.5rem;
+                    padding-inline-start: 0.75rem;
+                    padding-inline-end: 1rem;
+                    position: relative;
+                    &:focus,
+                    &:focus-visible {
+                        outline: 2px solid transparent;
+                        outline-offset: 2px;
+                    }
+
+                    &.ax-state-selected {
+                        &:not(&.ax-check-box){
+                            &::after {
+                                position: absolute;
+                                inset-inline-end: 0;
+                                top: 50%;
+                                transform: translate(-50%, -50%);
+                                font-size: 1.5rem;
+                                font-family: "acorex-icons";
+                                content: "\e912";
+                                color: rgb(var(--ax-color-primary));
+                            }
+                        }
+                    }
+
+                    // &:not(.ax-check-box) {
+                    //     &.ax-state-selected {
+                    //     }
+                    // }
+
+                    &.ax-state-disabled {
+                        cursor: not-allowed;
+                        opacity: 0.5;
+                    }
+
+                    &:focus,
+                    &:focus-within,
+                    &:hover {
+                        background-color: rgba(var(--ax-color-ghost), 0.05);
+                    }
+                    &.ax-state-focus {
+                        background-color: rgba(var(--ax-color-ghost), 0.05);
+                    }
+                }
+            }
+
+            .ax-list-loading-container {
+                display: flex;
+                justify-content: center;
+                padding: 0.5rem;
+            }
+        }
+    }
+
+    .ax-search-box-container {
+        padding: 0.5rem;
+
+        &.ax-state-hidden {
+            display: none;
+        }
+    }
+    .ax-footer {
+    }
+}

package/src/shared/_radio.scss

@@ -0,0 +1,37 @@
+.ax-dark {
+    .ax-radio {
+        background-color: rgba(var(--ax-color-ghost), 0.05);
+    }
+}
+.ax-radio {
+    width: 1rem;
+    height: 1rem;
+    border: 1px solid;
+    border-color: rgb(var(--ax-color-border-default));
+    border-radius: 999rem;
+    background-color: rgb(var(--ax-color-surface));
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    vertical-align: middle;
+    appearance: none;
+
+    &:checked {
+        border-color: rgb(var(--ax-color-primary));
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+        background-color: rgb(var(--ax-color-primary));
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+
+    &:focus {
+        outline-offset: 2px;
+        outline-width: 2px;
+        outline-style: solid;
+        outline-color: rgba(var(--ax-color-primary));
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}

package/src/shared/_skeleton.scss

@@ -0,0 +1,26 @@
+.ax-skeleton {
+    position: relative;
+    overflow: hidden;
+    background-color: rgba(var(--ax-color-ghost),0.05);
+    &.ax-skeleton-animate {
+        &::before {
+            content: "";
+            display: block;
+            position: absolute;
+            top: 0;
+            height: 100%;
+            width: 14rem;
+            left: -200px;
+            background: linear-gradient(to right, transparent 0%, rgba(var(--ax-color-ghost),0.03) 50%, transparent 100%);
+            animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+        }
+    }
+}
+@keyframes load {
+    from {
+        left: -200px;
+    }
+    to {
+        left: 100%;
+    }
+}

package/src/shared/_table.scss

@@ -0,0 +1,116 @@
+@layer components {
+    .ax-table {
+        width: 100%;
+        border-radius: var(--ax-rounded-border-default);
+        border-collapse: collapse;
+        border: 1px solid;
+        border-color: rgb(var(--ax-color-border-default));
+        overflow: hidden;
+        font-size: 0.875rem;
+        td {
+            border-bottom: 1px solid;
+            border-color: rgb(var(--ax-color-border-default));
+            padding: 1rem 1.5rem;
+        }
+        thead {
+            background-color: rgb(var(--ax-color-ghost), 0.05);
+            box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
+            border-bottom: 1px solid;
+            border-color: rgb(var(--ax-color-border-default));
+            th {
+                font-weight: bold;
+                text-align: start;
+                padding: 1rem 1.5rem;
+
+            }
+        }
+        &.ax-table-alternate {
+            tbody {
+                tr {
+                    &:nth-child(even) {
+                        background-color: rgb(var(--ax-color-ghost), 0.03);
+                    }
+                }
+            }
+        }
+        &.ax-table-bordered {
+            thead {
+                th {
+                    border-top: 0 !important;
+                }
+            }
+            tbody {
+                tr {
+                    &:last-child {
+                        td {
+                            border-bottom: 0 !important;
+                        }
+                    }
+                    td {
+                        &:last-child {
+                            border-bottom: 0 !important;
+
+                        }
+                    }
+                }
+            }
+
+            td,
+            th {
+                border: 1px solid;
+                border-color: rgb(var(--ax-color-border-default));
+                &:first-child {
+                    border-inline-start-width: 0px;
+
+                }
+                &:last-child {
+                    border-inline-end-width: 0px;
+
+                }
+            }
+        }
+        @media screen and (max-width: 601px) {
+            &.ax-table-responsive {
+                overflow-wrap: break-word;
+                display: block;
+                border: 0px;
+                thead {
+                    position: absolute;
+                    inset-inline-start: -100%;
+                    top: -100%;
+
+                }
+
+                td {
+                    
+                    display: block;
+                    float: inline-start;
+                    width: 100%;
+                    clear: both;
+                    background: rgb(var(--ax-color-surface));
+                    padding: 0.375rem 0.625rem;
+                    box-sizing: border-box;
+                    &:last-child{
+                        border: 0;
+                    }
+                    &:before {
+                        content: attr(data-label);
+                        display: block;
+                        font-weight: bold;
+                    }
+                }
+                tr {
+                    border: 1px solid;
+                    border-color: rgb(var(--ax-color-border-default));
+                }
+                tr,
+                tbody {
+                    display: block;
+                    width: 100%;
+                    float: inline-start;
+                    margin-bottom: 0.625rem;
+                }
+            }
+        }
+    }
+}

package/src/shared/_utils.scss

@@ -0,0 +1,46 @@
+@import "../variables/index.scss";
+
+[class*=" ax-icon-"],
+[class^="ax-icon-"] {
+    vertical-align: middle;
+}
+
+.ax-rotaion-0 {
+    transform: rotate(0);
+}
+
+@each $deg in $degrees {
+    .ax-rotation-#{$deg} {
+        transform: rotate(#{$deg}deg);
+    }
+
+    .-ax-rotation-#{$deg} {
+        transform: rotate(-#{$deg}deg);
+    }
+}
+
+.ax-transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+.ax-w-full {
+    width: 100%;
+}
+
+.ax-h-full {
+    height: 100%;
+}
+
+.ax-fieldset {
+    @apply ax-border ax-border-solid ax-border-neutral-300 ax-p-3 ax-rounded dark:ax-border-white/10;
+    border: 1px solid;
+    border-color: rgb(var(--ax-color-border-default));
+    padding: 0.75rem;
+    border-radius: var(--ax-rounded-border-default);
+    legend {
+        font-size: 0.875rem;
+        padding: 0 0.25rem;
+    }
+}

package/src/shared/index.scss

@@ -0,0 +1,12 @@
+@import "./check-box";
+@import "./decoration";
+@import "./drop-down";
+@import "./editor-container";
+@import "./general-button";
+@import "./icon-control";
+@import "./inputs";
+@import "./list";
+@import "./radio";
+@import "./skeleton";
+@import "./table";
+@import "./utils";

package/src/utility/_mixins.scss

@@ -70,13 +70,13 @@
 
 @mixin control-states($type) {
     @if ($type == "editor") {
-        @apply dark:ax-border-white/10 dark:ax-bg-white/10 dark:ax-backdrop-blur-3xl;
+        // @apply dark:ax-border-white/10 dark:ax-bg-white/10 dark:ax-backdrop-blur-3xl;
     }
     @if ($type == "editor-disabled") {
-        @apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/10 dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed #{!important};
+        // @apply ax-bg-neutral-100 ax-text-neutral-fore dark:ax-border-white/10 dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed #{!important};
     }
     @if ($type == "surface") {
-        @apply dark:ax-bg-default-background dark:ax-border-white/10 ;
+        // @apply dark:ax-bg-body-background dark:ax-border-white/10 ;
     }
 }
 

package/src/utility/index.scss

@@ -1,26 +1,20 @@
-@layer utilities {
-    .ax-sm {
-        --ax-base-size: calc(var(--ax-size) - 2px);
+.ax-sm {
+    --ax-size-default: 2rem;
+    font-size: 0.75rem;
+    * {
         font-size: 0.75rem;
-        * {
-            font-size: 0.75rem;
-        }
     }
-    .ax-md {
-        --ax-base-size: var(--ax-size);
-        font-size: 0.875rem;
-        * {
-            font-size: 0.875rem;
-        }
-    }
-    .ax-lg {
-        --ax-base-size: calc(var(--ax-size) + 2px);
-        font-size: 1rem;
-        * {
-            font-size: 1rem;
-        }
-    }
-    .ax-filp {
-        transform: scale(-1, 1);
+}
+.ax-md {
+    font-size: 0.875rem;
+}
+.ax-lg {
+    --ax-size-default: 3rem;
+    font-size: 1.25rem;
+    * {
+        font-size: 1.25rem;
     }
 }
+.ax-filp {
+    transform: scale(-1, 1);
+}

package/src/variables/_colors.scss

@@ -1,122 +1,91 @@
+$color_names: "primary", "secondary", "success", "warning", "danger";
+$look_names: "default", "outline", "blank";
 $theme-colors: (
     "white": "255 255 255",
     "black": "0 0 0",
-    "placeholder": "156 163 175",
-    "border": "209 213 219",
-    "disabled": "224 224 224",
-    "disabled-fore": "117 117 117",
-    "disabled-border": "191 191 191",
     "primary": (
-        "": "59 130 246",
-        "fore": "255 255 255",
-        "50": "239 246 255",
-        "100": "219 234 254",
-        "200": "191 219 254",
-        "300": "147 197 253",
-        "400": "96 165 250",
-        "500": "59 130 246",
-        "600": "37 99 235",
-        "700": "29 78 216",
-        "800": "30 64 175",
-        "900": "30 58 138",
+        "": "59, 130, 246",
+        "fore": "255, 255, 255",
+        "50": "239, 246, 255",
+        "100": "219, 234, 254",
+        "200": "191, 219, 254",
+        "300": "147, 197, 253",
+        "400": "96, 165, 250",
+        "500": "59, 130, 246",
+        "600": "37, 99, 235",
+        "700": "29, 78, 216",
+        "800": "30, 64, 175",
+        "900": "30, 58, 138",
     ),
     "secondary": (
-        "": "236 72 153",
-        "fore": "255 255 255",
-        "50": "253 242 248",
-        "100": "252 231 243",
-        "200": "251 207 232",
-        "300": "249 168 212",
-        "400": "244 114 182",
-        "500": "236 72 153",
-        "600": "219 39 119",
-        "700": "190 24 93",
-        "800": "157 23 77",
-        "900": "131 24 67",
+        "": "73, 82, 97",
+        "fore": "255, 255, 255",
+        "50": "233, 234, 236",
+        "100": "200, 203, 208",
+        "200": "164, 169, 176",
+        "300": "128, 134, 144",
+        "400": "100, 108, 121",
+        "500": "73, 82, 97",
+        "600": "66, 75, 89",
+        "700": "57, 65, 79",
+        "800": "49, 56, 69",
+        "900": "33, 40, 51",
     ),
     "success": (
-        "": "76 175 80",
-        "fore": "255 255 255",
-        "50": "236 253 245",
-        "100": "209 250 229",
-        "200": "167 243 208",
-        "300": "110 231 183",
-        "400": "52 211 153",
-        "500": "16 185 129",
-        "600": "5 150 105",
-        "700": "4 120 87",
-        "800": "6 95 70",
-        "900": "6 78 59",
+        "": "16, 185, 129",
+        "fore": "255, 255, 255",
+        "50": "236, 253, 245",
+        "100": "209, 250, 229",
+        "200": "167, 243, 208",
+        "300": "110, 231, 183",
+        "400": "52, 211, 153",
+        "500": "16, 185, 129",
+        "600": "5, 150, 105",
+        "700": "4, 120, 87",
+        "800": "6, 95, 70",
+        "900": "6, 78, 59",
     ),
     "danger": (
-        "": "244 63 94",
-        "fore": "255 241 242",
-        "50": "255 241 242",
-        "100": "255 228 230",
-        "200": "254 205 211",
-        "300": "253 164 175",
-        "400": "251 113 133",
-        "500": "244 63 94",
-        "600": "225 29 72",
-        "700": "190 18 60",
-        "800": "159 18 57",
-        "900": "136 19 55",
+        "": "239, 68, 68",
+        "fore": "255, 255, 255",
+        "50": "254, 242, 242",
+        "100": "254, 226, 226",
+        "200": "254, 202, 202",
+        "300": "252, 165, 165",
+        "400": "248, 113, 113",
+        "500": "239, 68, 68",
+        "600": "220, 38, 38",
+        "700": "185, 28, 28",
+        "800": "153, 27, 27",
+        "900": "127, 29, 29",
     ),
     "warning": (
-        "": "255 193 7",
-        "fore": "33 37 41",
-        "50": "255 248 225",
-        "100": "255 236 181",
-        "200": "255 224 131",
-        "300": "255 212 81",
-        "400": "255 202 44",
-        "500": "255 193 7",
-        "600": "255 187 6",
-        "700": "255 179 5",
-        "800": "255 171 4",
-        "900": "255 158 2",
+        "": "245, 158, 11",
+        "fore": "0, 0, 0",
+        "50": "255, 251, 235",
+        "100": "254, 243, 199",
+        "200": "253, 230, 138",
+        "300": "252, 211, 77",
+        "400": "251, 191, 36",
+        "500": "245, 158, 11",
+        "600": "217, 119, 6",
+        "700": "180, 83, 9",
+        "800": "146, 64, 14",
+        "900": "120, 53, 15",
     ),
-    "info": (
-        "": "139 92 246",
-        "fore": "255 255 255",
-        "50": "245 243 255",
-        "100": "237 233 254",
-        "200": "221 214 254",
-        "300": "196 181 253",
-        "400": "167 139 250",
-        "500": "139 92 246",
-        "600": "124 58 237",
-        "700": "109 40 217",
-        "800": "91 33 182",
-        "900": "76 29 149",
-    ),
-    "light": (
-        "": "100 116 139",
-        "fore": "15 23 42",
-        "50": "248 250 252",
-        "100": "241 245 249",
-        "200": "226 232 240",
-        "300": "203 213 225",
-        "400": "148 163 184",
-        "500": "100 116 139",
-        "600": "71 85 105",
-        "700": "51 65 85",
-        "800": "30 41 59",
-        "900": "15 23 42",
-    ),
-    "dark": (
-        "": "21 21 21",
-        "fore": "255 255 255",
-        "50": "227 227 227",
-        "100": "185 185 185",
-        "200": "138 138 138",
-        "300": "91 91 91",
-        "400": "56 56 56",
-        "500": "21 21 21",
-        "600": "18 18 18",
-        "700": "15 15 15",
-        "800": "12 12 12",
-        "900": "6 6 6",
+    "neutral": (
+        "": "113, 113, 122",
+        "fore": "24, 24, 27",
+        "50": "250, 250, 250",
+        "100": "244, 244, 245",
+        "200": "228, 228, 231",
+        "300": "212, 212, 216",
+        "400": "161, 161, 170",
+        "500": "113, 113, 122",
+        "600": "82, 82, 91",
+        "700": "63, 63, 70",
+        "800": "39, 39, 42",
+        "900": "24, 24, 27",
     )
-    
+   
 );

package/src/variables/_degrees.scss

@@ -0,0 +1 @@
+$degrees: 45, 90, 130, 180;

package/src/variables/index.scss

@@ -0,0 +1,2 @@
+@import "./colors";
+@import "./degrees";