@acorex/styles 7.1.2 → 7.1.3

package/src/themes/default.scss

@@ -1,142 +1,142 @@
-:root {
-  --ax-size-base: 2.5rem;
-  --ax-size-default: var(--ax-size-base);
-
-  --ax-rounded-border-default: 0.375rem;
-  --ax-color-border-default: 224, 224, 224;
-
-  --ax-color-background-default: 250, 250, 250;
-  --ax-color-text-default: 18, 18, 18;
-
-  --ax-color-surface: 255, 255, 255;
-  --ax-color-surface-fore: 18, 18, 18;
-
-  --ax-color-on-surface: 244, 244, 244;
-  --ax-color-on-surface-fore: 20, 20, 20;
-
-  --ax-color-input-surface: 255, 255, 255;
-  --ax-color-input-surface-fore: 18, 18, 18;
-
-  --ax-color-ghost-fore: 30, 41, 59;
-  --ax-color-ghost-50: 247, 248, 250;
-  --ax-color-ghost-100: 235, 238, 242;
-  --ax-color-ghost-200: 221, 226, 233;
-  --ax-color-ghost-300: 207, 214, 224;
-  --ax-color-ghost-400: 197, 206, 217;
-  --ax-color-ghost-500: 187, 197, 210;
-  --ax-color-ghost-600: 181, 191, 205;
-  --ax-color-ghost-700: 172, 184, 199;
-  --ax-color-ghost-800: 164, 176, 193;
-  --ax-color-ghost-900: 150, 163, 182;
-
-  --ax-color-primary-fore: 255, 255, 255;
-  --ax-color-primary-50: 239, 246, 255;
-  --ax-color-primary-100: 219, 234, 254;
-  --ax-color-primary-200: 191, 219, 254;
-  --ax-color-primary-300: 147, 197, 253;
-  --ax-color-primary-400: 96, 165, 250;
-  --ax-color-primary-500: 59, 130, 246;
-  --ax-color-primary-600: 37, 99, 235;
-  --ax-color-primary-700: 29, 78, 216;
-  --ax-color-primary-800: 30, 64, 175;
-  --ax-color-primary-900: 30, 58, 138;
-
-  --ax-color-secondary-fore: 255, 255, 255;
-  --ax-color-secondary-50: 233, 234, 236;
-  --ax-color-secondary-100: 200, 203, 208;
-  --ax-color-secondary-200: 164, 169, 176;
-  --ax-color-secondary-300: 128, 134, 144;
-  --ax-color-secondary-400: 100, 108, 121;
-  --ax-color-secondary-500: 73, 82, 97;
-  --ax-color-secondary-600: 66, 75, 89;
-  --ax-color-secondary-700: 57, 65, 79;
-  --ax-color-secondary-800: 49, 56, 69;
-  --ax-color-secondary-900: 33, 40, 51;
-
-  --ax-color-success-fore: 255, 255, 255;
-  --ax-color-success-50: 236, 253, 245;
-  --ax-color-success-100: 209, 250, 229;
-  --ax-color-success-200: 167, 243, 208;
-  --ax-color-success-300: 110, 231, 183;
-  --ax-color-success-400: 52, 211, 153;
-  --ax-color-success-500: 16, 185, 129;
-  --ax-color-success-600: 5, 150, 105;
-  --ax-color-success-700: 4, 120, 87;
-  --ax-color-success-800: 6, 95, 70;
-  --ax-color-success-900: 6, 78, 59;
-
-  --ax-color-danger-fore: 255, 255, 255;
-  --ax-color-danger-50: 254, 242, 242;
-  --ax-color-danger-100: 254, 226, 226;
-  --ax-color-danger-200: 254, 202, 202;
-  --ax-color-danger-300: 252, 165, 165;
-  --ax-color-danger-400: 248, 113, 113;
-  --ax-color-danger-500: 239, 68, 68;
-  --ax-color-danger-600: 220, 38, 38;
-  --ax-color-danger-700: 185, 28, 28;
-  --ax-color-danger-800: 153, 27, 27;
-  --ax-color-danger-900: 127, 29, 29;
-
-  --ax-color-warning-fore: 120, 53, 15;
-  --ax-color-warning-50: 255, 248, 225;
-  --ax-color-warning-100: 255, 236, 179;
-  --ax-color-warning-200: 255, 224, 130;
-  --ax-color-warning-300: 255, 213, 79;
-  --ax-color-warning-400: 255, 202, 40;
-  --ax-color-warning-500: 255, 193, 7;
-  --ax-color-warning-600: 255, 179, 0;
-  --ax-color-warning-700: 255, 160, 0;
-  --ax-color-warning-800: 255, 143, 0;
-  --ax-color-warning-900: 255, 111, 0;
-
-  --ax-color-info-fore: 255, 255, 255;
-  --ax-color-info-50: 226, 244, 252;
-  --ax-color-info-100: 183, 228, 248;
-  --ax-color-info-200: 135, 210, 244;
-  --ax-color-info-300: 86, 192, 240;
-  --ax-color-info-400: 50, 179, 236;
-  --ax-color-info-500: 14, 165, 233;
-  --ax-color-info-600: 12, 157, 230;
-  --ax-color-info-700: 10, 147, 227;
-  --ax-color-info-800: 8, 138, 223;
-  --ax-color-info-900: 4, 121, 217;
-}
-
-.ax-dark {
-  --ax-color-background-default: 27, 27, 27;
-  --ax-color-text-default: 224, 224, 224;
-  --ax-color-border-default: 255, 255, 255, 0.13;
-
-  --ax-color-surface: 50, 50, 50;
-  --ax-color-surface-fore: 224, 224, 224;
-
-  --ax-color-on-surface: 62, 62, 62;
-  --ax-color-on-surface-fore: 224, 224, 224;
-
-  --ax-color-input-surface: 0, 0, 0, 0.26;
-  --ax-color-input-surface-fore: 224, 224, 224;
-
-  --ax-color-ghost-fore: 255, 255, 255;
-  --ax-color-ghost-50: 232, 233, 234;
-  --ax-color-ghost-100: 199, 200, 203;
-  --ax-color-ghost-200: 161, 163, 169;
-  --ax-color-ghost-300: 123, 126, 134;
-  --ax-color-ghost-400: 95, 99, 108;
-  --ax-color-ghost-500: 67, 71, 82;
-  --ax-color-ghost-600: 61, 64, 75;
-  --ax-color-ghost-700: 52, 55, 65;
-  --ax-color-ghost-800: 44, 47, 56;
-  --ax-color-ghost-900: 30, 32, 40;
-
-  //   --ax-color-primary-fore : 25, 41, 63;
-  //   --ax-color-primary-50 : 243, 248, 255;
-  // --ax-color-primary-100 : 226, 236, 254;
-  // --ax-color-primary-200 : 206, 224, 253;
-  // --ax-color-primary-300 : 186, 212, 252;
-  // --ax-color-primary-400 : 172, 202, 252;
-  // --ax-color-primary-500 : 157, 193, 251;
-  // --ax-color-primary-600 : 149, 187, 250;
-  // --ax-color-primary-700 : 139, 179, 250;
-  // --ax-color-primary-800 : 129, 171, 249;
-  // --ax-color-primary-900 : 111, 158, 248
-}
+:root {
+  --ax-size-base: 2.5rem;
+  --ax-size-default: var(--ax-size-base);
+
+  --ax-rounded-border-default: 0.375rem;
+  --ax-color-border-default: 224, 224, 224;
+
+  --ax-color-background-default: 250, 250, 250;
+  --ax-color-text-default: 18, 18, 18;
+
+  --ax-color-surface: 255, 255, 255;
+  --ax-color-surface-fore: 18, 18, 18;
+
+  --ax-color-on-surface: 244, 244, 244;
+  --ax-color-on-surface-fore: 20, 20, 20;
+
+  --ax-color-input-surface: 255, 255, 255;
+  --ax-color-input-surface-fore: 18, 18, 18;
+
+  --ax-color-ghost-fore: 30, 41, 59;
+  --ax-color-ghost-50: 247, 248, 250;
+  --ax-color-ghost-100: 235, 238, 242;
+  --ax-color-ghost-200: 221, 226, 233;
+  --ax-color-ghost-300: 207, 214, 224;
+  --ax-color-ghost-400: 197, 206, 217;
+  --ax-color-ghost-500: 187, 197, 210;
+  --ax-color-ghost-600: 181, 191, 205;
+  --ax-color-ghost-700: 172, 184, 199;
+  --ax-color-ghost-800: 164, 176, 193;
+  --ax-color-ghost-900: 150, 163, 182;
+
+  --ax-color-primary-fore: 255, 255, 255;
+  --ax-color-primary-50: 239, 246, 255;
+  --ax-color-primary-100: 219, 234, 254;
+  --ax-color-primary-200: 191, 219, 254;
+  --ax-color-primary-300: 147, 197, 253;
+  --ax-color-primary-400: 96, 165, 250;
+  --ax-color-primary-500: 59, 130, 246;
+  --ax-color-primary-600: 37, 99, 235;
+  --ax-color-primary-700: 29, 78, 216;
+  --ax-color-primary-800: 30, 64, 175;
+  --ax-color-primary-900: 30, 58, 138;
+
+  --ax-color-secondary-fore: 255, 255, 255;
+  --ax-color-secondary-50: 233, 234, 236;
+  --ax-color-secondary-100: 200, 203, 208;
+  --ax-color-secondary-200: 164, 169, 176;
+  --ax-color-secondary-300: 128, 134, 144;
+  --ax-color-secondary-400: 100, 108, 121;
+  --ax-color-secondary-500: 73, 82, 97;
+  --ax-color-secondary-600: 66, 75, 89;
+  --ax-color-secondary-700: 57, 65, 79;
+  --ax-color-secondary-800: 49, 56, 69;
+  --ax-color-secondary-900: 33, 40, 51;
+
+  --ax-color-success-fore: 255, 255, 255;
+  --ax-color-success-50: 236, 253, 245;
+  --ax-color-success-100: 209, 250, 229;
+  --ax-color-success-200: 167, 243, 208;
+  --ax-color-success-300: 110, 231, 183;
+  --ax-color-success-400: 52, 211, 153;
+  --ax-color-success-500: 16, 185, 129;
+  --ax-color-success-600: 5, 150, 105;
+  --ax-color-success-700: 4, 120, 87;
+  --ax-color-success-800: 6, 95, 70;
+  --ax-color-success-900: 6, 78, 59;
+
+  --ax-color-danger-fore: 255, 255, 255;
+  --ax-color-danger-50: 254, 242, 242;
+  --ax-color-danger-100: 254, 226, 226;
+  --ax-color-danger-200: 254, 202, 202;
+  --ax-color-danger-300: 252, 165, 165;
+  --ax-color-danger-400: 248, 113, 113;
+  --ax-color-danger-500: 239, 68, 68;
+  --ax-color-danger-600: 220, 38, 38;
+  --ax-color-danger-700: 185, 28, 28;
+  --ax-color-danger-800: 153, 27, 27;
+  --ax-color-danger-900: 127, 29, 29;
+
+  --ax-color-warning-fore: 120, 53, 15;
+  --ax-color-warning-50: 255, 248, 225;
+  --ax-color-warning-100: 255, 236, 179;
+  --ax-color-warning-200: 255, 224, 130;
+  --ax-color-warning-300: 255, 213, 79;
+  --ax-color-warning-400: 255, 202, 40;
+  --ax-color-warning-500: 255, 193, 7;
+  --ax-color-warning-600: 255, 179, 0;
+  --ax-color-warning-700: 255, 160, 0;
+  --ax-color-warning-800: 255, 143, 0;
+  --ax-color-warning-900: 255, 111, 0;
+
+  --ax-color-info-fore: 255, 255, 255;
+  --ax-color-info-50: 226, 244, 252;
+  --ax-color-info-100: 183, 228, 248;
+  --ax-color-info-200: 135, 210, 244;
+  --ax-color-info-300: 86, 192, 240;
+  --ax-color-info-400: 50, 179, 236;
+  --ax-color-info-500: 14, 165, 233;
+  --ax-color-info-600: 12, 157, 230;
+  --ax-color-info-700: 10, 147, 227;
+  --ax-color-info-800: 8, 138, 223;
+  --ax-color-info-900: 4, 121, 217;
+}
+
+.ax-dark {
+  --ax-color-background-default: 27, 27, 27;
+  --ax-color-text-default: 224, 224, 224;
+  --ax-color-border-default: 255, 255, 255, 0.13;
+
+  --ax-color-surface: 50, 50, 50;
+  --ax-color-surface-fore: 224, 224, 224;
+
+  --ax-color-on-surface: 62, 62, 62;
+  --ax-color-on-surface-fore: 224, 224, 224;
+
+  --ax-color-input-surface: 0, 0, 0, 0.26;
+  --ax-color-input-surface-fore: 224, 224, 224;
+
+  --ax-color-ghost-fore: 255, 255, 255;
+  --ax-color-ghost-50: 232, 233, 234;
+  --ax-color-ghost-100: 199, 200, 203;
+  --ax-color-ghost-200: 161, 163, 169;
+  --ax-color-ghost-300: 123, 126, 134;
+  --ax-color-ghost-400: 95, 99, 108;
+  --ax-color-ghost-500: 67, 71, 82;
+  --ax-color-ghost-600: 61, 64, 75;
+  --ax-color-ghost-700: 52, 55, 65;
+  --ax-color-ghost-800: 44, 47, 56;
+  --ax-color-ghost-900: 30, 32, 40;
+
+  //   --ax-color-primary-fore : 25, 41, 63;
+  //   --ax-color-primary-50 : 243, 248, 255;
+  // --ax-color-primary-100 : 226, 236, 254;
+  // --ax-color-primary-200 : 206, 224, 253;
+  // --ax-color-primary-300 : 186, 212, 252;
+  // --ax-color-primary-400 : 172, 202, 252;
+  // --ax-color-primary-500 : 157, 193, 251;
+  // --ax-color-primary-600 : 149, 187, 250;
+  // --ax-color-primary-700 : 139, 179, 250;
+  // --ax-color-primary-800 : 129, 171, 249;
+  // --ax-color-primary-900 : 111, 158, 248
+}

package/src/utility/_mixins.scss

@@ -1,71 +1,71 @@
-@mixin screen($breakpoint) {
-    // $breakpoint is simply a variable that can have several values
-
-    @if $breakpoint == extraSmall {
-        // Media query for 320px and less
-        @media (max-width: 320px) {
-            @content;
-        }
-        @media (min-width: 321px) and (max-width: 480px) {
-            @content;
-        }
-    }
-
-    @if $breakpoint == tablet {
-        // here `laptop` is the value of $breakpoint
-        // when call laptop, we mean the following piece of code
-
-        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
-            @content;
-        }
-    }
-
-    @if $breakpoint == mobile {
-        @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
-            @content;
-        }
-    }
-
-    @if $breakpoint == laptop {
-        @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
-            @content;
-        }
-    }
-}
-
-
-@mixin responsive($media){
-    @if $media == 'phone'{
-        @media (max-width: 599px) { @content; }
-    }
-    @if $media == 'tablet'{
-        @media (min-width: 600px) { @content; }
-    }
-    @if $media == 'tablet-landscape'{
-        @media (min-width: 900px) { @content; }
-    }
-    @if $media == 'desktop'{
-        @media (min-width: 1200px) { @content; }
-    }
-    @if $media == 'desktop-large'{
-        @media (min-width: 1800px) { @content; }
-    }
-}
-
-@mixin color-look-generator() {
-    $colors: ("primary", "secondary", "success", "warning", "danger", "info", "light", "dark");
-    $looks: ("default", "outline", "twotone", "blank");
-    @each $c in $colors {
-        @each $l in $looks {
-            &.ax-#{$c}-#{$l} {
-                @include color-look($c, $l);
-            }
-        }
-    }
-}
-
-@mixin rtl {
-    .ax-rtl {
-        @content;
-    }
-}
+@mixin screen($breakpoint) {
+    // $breakpoint is simply a variable that can have several values
+
+    @if $breakpoint == extraSmall {
+        // Media query for 320px and less
+        @media (max-width: 320px) {
+            @content;
+        }
+        @media (min-width: 321px) and (max-width: 480px) {
+            @content;
+        }
+    }
+
+    @if $breakpoint == tablet {
+        // here `laptop` is the value of $breakpoint
+        // when call laptop, we mean the following piece of code
+
+        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
+            @content;
+        }
+    }
+
+    @if $breakpoint == mobile {
+        @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+            @content;
+        }
+    }
+
+    @if $breakpoint == laptop {
+        @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
+            @content;
+        }
+    }
+}
+
+
+@mixin responsive($media){
+    @if $media == 'phone'{
+        @media (max-width: 599px) { @content; }
+    }
+    @if $media == 'tablet'{
+        @media (min-width: 600px) { @content; }
+    }
+    @if $media == 'tablet-landscape'{
+        @media (min-width: 900px) { @content; }
+    }
+    @if $media == 'desktop'{
+        @media (min-width: 1200px) { @content; }
+    }
+    @if $media == 'desktop-large'{
+        @media (min-width: 1800px) { @content; }
+    }
+}
+
+@mixin color-look-generator() {
+    $colors: ("primary", "secondary", "success", "warning", "danger", "info", "light", "dark");
+    $looks: ("default", "outline", "twotone", "blank");
+    @each $c in $colors {
+        @each $l in $looks {
+            &.ax-#{$c}-#{$l} {
+                @include color-look($c, $l);
+            }
+        }
+    }
+}
+
+@mixin rtl {
+    .ax-rtl {
+        @content;
+    }
+}

package/src/utility/index.scss

@@ -1,55 +1,55 @@
-// .ax-xs {
-//     --ax-size-default: 2rem;
-//     font-size: 0.75rem;
-//     * {
-//         font-size: 0.75rem;
-//     }
-// }
-// .ax-sm {
-//     --ax-size-default: 2.25rem;
-//     font-size: 0.875rem;
-//     * {
-//         font-size: 0.875rem;
-//     }
-// }
-// .ax-md {
-//     --ax-size-default: 2.5rem;
-//     font-size: 0.875rem;
-// }
-// .ax-lg {
-//     --ax-size-default: 3rem;
-//     font-size: 1rem;
-//     * {
-//         font-size: 1rem;
-//     }
-// }
-// .ax-xl {
-//     --ax-size-default: 3.5rem;
-//     font-size: 1rem;
-//     * {
-//         font-size: 1rem;
-//     }
-// }
-.ax-xs {
-  --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
-}
-
-.ax-sm {
-  --ax-size-default: calc(var(--ax-size-base) - 0.25rem);
-}
-
-.ax-md {
-  --ax-size-default: 2.5rem;
-}
-
-.ax-lg {
-  --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
-}
-
-.ax-xl {
-  --ax-size-default: calc(var(--ax-size-base) - 1rem);
-}
-
-.ax-filp {
-  transform: scale(-1, 1);
-}
+// .ax-xs {
+//     --ax-size-default: 2rem;
+//     font-size: 0.75rem;
+//     * {
+//         font-size: 0.75rem;
+//     }
+// }
+// .ax-sm {
+//     --ax-size-default: 2.25rem;
+//     font-size: 0.875rem;
+//     * {
+//         font-size: 0.875rem;
+//     }
+// }
+// .ax-md {
+//     --ax-size-default: 2.5rem;
+//     font-size: 0.875rem;
+// }
+// .ax-lg {
+//     --ax-size-default: 3rem;
+//     font-size: 1rem;
+//     * {
+//         font-size: 1rem;
+//     }
+// }
+// .ax-xl {
+//     --ax-size-default: 3.5rem;
+//     font-size: 1rem;
+//     * {
+//         font-size: 1rem;
+//     }
+// }
+.ax-xs {
+  --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
+}
+
+.ax-sm {
+  --ax-size-default: calc(var(--ax-size-base) - 0.25rem);
+}
+
+.ax-md {
+  --ax-size-default: 2.5rem;
+}
+
+.ax-lg {
+  --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
+}
+
+.ax-xl {
+  --ax-size-default: calc(var(--ax-size-base) - 1rem);
+}
+
+.ax-filp {
+  transform: scale(-1, 1);
+}

package/src/variables/_colors.scss

@@ -1,2 +1,2 @@
-$color_names: 'primary', 'secondary', 'success', 'warning', 'danger', 'info';
-$look_names: 'default', 'outline', 'blank';
+$color_names: 'primary', 'secondary', 'success', 'warning', 'danger', 'info';
+$look_names: 'default', 'outline', 'blank';

package/src/variables/_degrees.scss

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

package/src/variables/index.scss

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