@acorex/styles 19.10.0-next.0 → 19.10.0-next.10

package/base/index.scss

@@ -0,0 +1,15 @@
+@use './preflight' as *;
+:root {
+  --ax-overlay-full-width: 93;
+  --ax-sys-transition-duration: 150ms;
+  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+html {
+  background-color: rgba(var(--ax-sys-color-lightest-surface));
+  color: rgba(var(--ax-sys-color-on-lightest-surface));
+}
+
+html.ax-dark {
+  background-color: rgba(var(--ax-sys-color-darkest-surface));
+  color: rgba(var(--ax-sys-color-on-darkest-surface));
+}

package/{src/shared → components}/_action-item.scss

@@ -63,7 +63,7 @@
 
     &:hover {
       &:not(&.ax-state-disabled, &.ax-state-selected) {
-        // background-color: rgba(var(--ax-sys-color-surface-high));
+        background-color: rgba(var(--ax-sys-color-surface));
         ax-prefix,
         ax-suffix {
           opacity: 1;

package/{src/shared → components}/_check-box.scss

@@ -8,7 +8,7 @@
   appearance: none;
   border-radius: 0.25rem /* 4px */;
   border-width: 1px;
-  border-color: rgba(var(--ax-sys-color-input-surface-border));
+  border-color: rgba(var(--ax-sys-color-border-surface));
   background-color: rgba(var(--ax-sys-color-input-surface));
   vertical-align: middle;
   outline: 2px solid transparent;

package/{src/shared → components}/_drop-down.scss

@@ -1,5 +1,5 @@
 @use '../variables/index.scss';
-@use '../mixins/index.scss' as mixins;
+@use '../mixins/' as mixins;
 .ax-drop-down {
   display: contents;
 
@@ -26,8 +26,8 @@
   height: fit-content;
   overflow: hidden;
   border-width: 1px;
-  border-color: rgba(var(--ax-sys-border-color));
-  background-color: rgba(var(--ax-sys-color-surface-lowest));
+  border-color: rgba(var(--ax-sys-color-border-lightest-surface));
+  background-color: rgba(var(--ax-sys-color-lightest-surface));
   --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
   box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
@@ -66,3 +66,10 @@
     height: 100vh;
   }
 }
+
+@include mixins.darkMode() {
+  .ax-overlay-pane {
+    background-color: rgba(var(--ax-sys-color-darker-surface));
+    border-color: rgba(var(--ax-sys-color-border-darker-surface));
+  }
+}

package/components/_editor-container.scss

@@ -0,0 +1,260 @@
+@use '../mixins/index.scss' as mixin;
+
+:root,
+.ax-editor-container {
+  --ax-comp-editor-font-size: 0.875rem;
+  --ax-comp-editor-space-start-size: 0.75rem;
+  --ax-comp-editor-space-end-size: 0.75rem;
+  --ax-comp-editor-height: var(--ax-sys-size-base);
+
+  --ax-comp-editor-error-bg-color: var(--ax-sys-color-danger-light-surface);
+  --ax-comp-editor-error-text-color: var(--ax-sys-color-danger-surface);
+  --ax-comp-editor-error-border-color: var(--ax-sys-color-border-danger-surface);
+  --ax-comp-editor-error-box-shadow-color: var(--ax-sys-color-danger-surface);
+
+  --ax-comp-editor-text-color: var(--ax-sys-color-on-lighter-surface);
+  --ax-comp-editor-border-color: var(--ax-sys-color-border-lighter-surface);
+  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
+  --ax-comp-editor-box-outline-width: 1px;
+  --ax-comp-editor-box-outline-color: var(--ax-sys-color-primary-surface);
+  --ax-comp-editor-placeholder-opacity: 0.5;
+
+  --ax-comp-editor-focused-border-color: var(--ax-sys-color-border-primary-surface);
+  --ax-comp-editor-focused-box-shadow-color: var(--ax-sys-color-primary-surface);
+
+  --ax-comp-editor-border-width: 0px;
+}
+
+.ax-editor-container {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  height: var(--ax-comp-editor-height);
+  font-size: var(--ax-comp-editor-font-size);
+  border-radius: var(--ax-comp-editor-border-radius);
+  border-width: var(--ax-comp-editor-border-width);
+  border-color: rgba(var(--ax-comp-editor-border-color));
+  background-color: rgba(var(--ax-comp-editor-bg-color));
+  color: rgba(var(--ax-comp-editor-text-color));
+
+  &:focus-within {
+    border-color: rgba(var(--ax-comp-editor-focused-border-color));
+    outline-width: var(--ax-comp-editor-box-outline-width);
+    outline-style: solid;
+    outline-color: rgba(var(--ax-comp-editor-focused-border-color));
+  }
+
+  &.ax-state-error {
+    border-color: rgba(var(--ax-comp-editor-error-border-color));
+    outline-width: var(--ax-comp-editor-box-outline-width);
+    outline-color: rgba(var(--ax-comp-editor-error-border-color));
+    outline-style: solid;
+    &:focus-within {
+      border-color: rgba(var(--ax-comp-editor-error-border-color));
+    }
+    .ax-input {
+      .ax-placeholder,
+      &::placeholder {
+        color: rgba(var(--ax-comp-editor-error-text-color), var(--ax-comp-editor-placeholder-opacity));
+      }
+    }
+  }
+
+  &.ax-solid {
+    @include mixin.solid-look();
+  }
+  &.ax-outline {
+    @include mixin.outline-look();
+  }
+
+  &.ax-flat {
+    @include mixin.flat-look();
+  }
+
+  &.ax-fill {
+    @include mixin.fill-look();
+  }
+
+  .ax-editor-input {
+    height: 100%;
+    flex: 1 1 0%;
+
+    .ax-input {
+      height: 100%;
+    }
+  }
+
+  .ax-editor,
+  .ax-input {
+    padding-inline-start: var(--ax-comp-editor-space-start-size);
+    padding-inline-end: var(--ax-comp-editor-space-end-size);
+  }
+  .ax-input {
+    // padding: 0 calc(var(--ax-comp-editor-font-size) - 4px);
+    font-size: var(--ax-comp-editor-font-size);
+    line-height: var(--ax-comp-editor-font-size);
+    color: rgba(var(--ax-comp-editor-text-color));
+    cursor: inherit;
+    .ax-placeholder,
+    &::placeholder {
+      font-size: inherit;
+      font-weight: 400;
+      color: rgb(var(--ax-comp-editor-text-color), var(--ax-comp-editor-placeholder-opacity));
+    }
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+      outline: none;
+    }
+  }
+
+  .ax-editor-container {
+    border-radius: 0 !important;
+    border: 0px !important;
+    // height: 100% !important;
+
+    &:focus-within {
+      box-shadow: none !important;
+    }
+    &:focus {
+      box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500));
+    }
+  }
+
+  &.ax-state-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ax-editor-control {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding-inline-start: 0.5rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    color: rgba(var(--ax-comp-editor-text-color));
+  }
+
+  &.ax-button-icon {
+    padding: 0 0.5rem;
+  }
+
+  .ax-input,
+  .ax-text-area {
+    text-align: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    height: 100%;
+    width: 100%;
+    flex: 1 1 0%;
+    background-color: transparent;
+    font-weight: inherit;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .ax-editor-button {
+    font-size: var(--ax-comp-editor-button-font-size, var(--ax-comp-editor-font-size));
+    height: var(--ax-comp-editor-button-height, 100%);
+  }
+
+  > ax-prefix {
+    padding-inline-start: var(--ax-comp-editor-space-end-size);
+  }
+
+  > ax-suffix,
+  .ax-editor-button,
+  .ax-clear-button {
+    padding-inline-end: var(--ax-comp-editor-space-end-size);
+  }
+  & > ax-prefix,
+  & > ax-suffix {
+    max-width: fit-content;
+  }
+  & > ax-prefix {
+    ax-icon {
+    }
+  }
+  & > ax-suffix {
+    ax-icon {
+    }
+  }
+
+  & > ax-prefix,
+  & > ax-suffix {
+    height: 100%;
+
+    // + .ax-input {
+    //   padding-left: 0.375rem !important;
+    //   padding-right: 0.375rem !important;
+    // }
+    * {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0px;
+    }
+
+    ax-title {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    & > ax-text {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .ax-button {
+    height: 100% !important;
+    border-radius: 0px !important;
+
+    &.ax-button-icon {
+      height: 100%;
+      width: var(--ax-comp-editor-height);
+    }
+  }
+}
+
+.ax-xs .ax-editor-container,
+.ax-editor-container.ax-xs {
+  --ax-comp-editor-font-size: 0.75rem;
+  --ax-comp-editor-space-start-size: 0.375rem;
+  --ax-comp-editor-space-end-size: 0.375rem;
+}
+.ax-sm .ax-editor-container,
+.ax-editor-container.ax-sm {
+  --ax-comp-editor-font-size: 0.875rem;
+  --ax-comp-editor-space-start-size: 0.5rem;
+  --ax-comp-editor-space-end-size: 0.5rem;
+}
+
+.ax-md .ax-editor-container,
+.ax-editor-container,
+.ax-editor-container.ax-md {
+  --ax-comp-editor-space-start-size: 0.75rem;
+  --ax-comp-editor-space-end-size: 0.75rem;
+}
+
+.ax-lg .ax-editor-container,
+.ax-editor-container.ax-lg {
+  --ax-comp-editor-font-size: 1.125rem;
+  --ax-comp-editor-space-start-size: 0.75rem;
+  --ax-comp-editor-space-end-size: 0.75rem;
+}
+
+.ax-xl .ax-editor-container,
+.ax-editor-container.ax-xl {
+  --ax-comp-editor-font-size: 1.5rem;
+  --ax-comp-editor-space-start-size: 0.75rem;
+  --ax-comp-editor-space-end-size: 0.75rem;
+}

package/{src/shared → components}/_general-button.scss

@@ -9,7 +9,7 @@
   padding-right: 1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: rgb(var(--ax-sys-color-input-surface-text), 0.75);
+  color: rgb(var(--ax-sys-color-on-surface), 0.75);
 
   &:hover {
     &:not(&:disabled, .ax-state-disabled) {
@@ -56,20 +56,20 @@
   margin-right: 0.25rem;
   font-size: 1rem /* 16px */;
   line-height: 1.5rem /* 24px */;
-  color: rgb(var(--ax-sys-body-text-color), 0.75);
+  color: rgb(var(--ax-sys-color-on-surface), 0.75);
 
   > button {
     display: flex;
   }
   &:hover {
     &:not(&:disabled, .ax-state-disabled) {
-      color: rgb(var(--ax-sys-body-text-color), 0.5);
+      color: rgb(var(--ax-sys-color-on-surface), 0.5);
     }
   }
   &:focus,
   &:focus-visible {
     &:not(&:disabled, .ax-state-disabled) {
-      color: rgb(var(--ax-sys-body-text-color));
+      color: rgb(var(--ax-sys-color-on-surface));
     }
   }
 }

package/{src/shared → components}/_list.scss

@@ -147,10 +147,10 @@
 
           &:focus-visible,
           &:hover {
-            background-color: rgba(var(--ax-sys-color-surface-high));
+            background-color: rgba(var(--ax-sys-color-surface));
           }
           &.ax-state-focus {
-            background-color: rgba(var(--ax-sys-color-surface-high));
+            background-color: rgba(var(--ax-sys-color-surface));
           }
         }
       }

package/{src/shared → components}/_radio.scss

@@ -10,7 +10,7 @@
   appearance: none;
   border-radius: 9999px /* 4px */;
   border-width: 1px;
-  border-color: rgba(var(--ax-sys-color-input-surface-border));
+  border-color: rgba(var(--ax-sys-color-border-surface));
   background-color: rgba(var(--ax-sys-color-input-surface));
   vertical-align: middle;
   outline: 2px solid transparent;

package/{src/shared → components}/_table.scss

@@ -2,7 +2,7 @@
 @include mixins.darkMode() {
   .ax-table {
     thead {
-      background-color: rgba(var(--ax-sys-color-surface-high));
+      background-color: rgba(var(--ax-sys-color-surface));
     }
   }
 }
@@ -27,7 +27,7 @@
   thead {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-border-color));
-    background-color: rgba(var(--ax-sys-color-surface-high));
+    background-color: rgba(var(--ax-sys-color-surface));
 
     th {
       padding-left: 1rem /* 16px */;
@@ -43,7 +43,7 @@
     tbody {
       tr {
         &:nth-child(even) {
-          background-color: rgba(var(--ax-sys-color-surface-high));
+          background-color: rgba(var(--ax-sys-color-surface));
         }
       }
     }

package/{src/shared/_utils.scss → components/_uploader.scss}

@@ -1,45 +1,4 @@
-@use '../variables/index.scss';
-@use '../mixins/util';
-
-[class*=' ax-icon-'],
-[class^='ax-icon-'] {
-  vertical-align: middle;
-}
-
-.ax-bold {
-  font-weight: bold !important;
-}
-
-.ax-fieldset {
-  border-radius: var(--ax-sys-border-radius);
-  border-width: 1px;
-  border-color: rgba(var(--ax-sys-color-input-surface-border));
-  padding: 0.75rem /* 12px */;
-
-  legend {
-    padding-left: 0.25rem /* 4px */;
-    padding-right: 0.25rem /* 4px */;
-    font-size: 0.875rem /* 14px */;
-    line-height: 1.25rem /* 20px */;
-  }
-}
-
-.ax-card {
-  border-radius: var(--ax-sys-border-radius);
-  border-width: 1px;
-  border-color: rgba(var(--ax-sys-color-input-surface-border));
-  background-color: rgba(var(--ax-sys-color-surface));
-}
-
-.ax-drop-zone {
-  > input {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-    opacity: 0;
-  }
-}
+@use '../mixins/index.scss' as mixin;
 .ax-uploader-overlay-state {
   border-radius: inherit;
   pointer-events: none;
@@ -66,11 +25,17 @@
   transition-duration: 150ms;
 }
 
-.ax-select-none,
-.ax-select-none * {
-  user-select: none !important;
+.ax-drop-zone {
+  > input {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    opacity: 0;
+  }
 }
-@include util.darkMode() {
+
+@include mixin.darkMode() {
   .ax-uploader-overlay-state {
     background-color: rgba(var(--ax-sys-color-primary-800), 0.75);
     color: rgba(var(--ax-sys-color-on-primary));

package/{src/shared → components}/index.scss

@@ -2,13 +2,10 @@
 @forward './actionsheet';
 @forward './check-box';
 @forward './drop-down';
-// @forward './editor-container';
+@forward './editor-container';
 @forward './general-button';
-@forward './inputs';
 @forward './list';
 @forward './radio';
-@forward './table';
-@forward './utils';
-
-// new //
 @forward './ripple';
+@forward './table';
+@forward './uploader';

package/index.scss

@@ -1,9 +1,7 @@
-@forward './src/base/preflight';
-@forward './src/variables/colors';
-
-@forward './src/base/index.scss';
-@forward './src/mixins/index.scss';
-@forward './src/shared/index.scss';
-@forward './src/utility/index.scss';
+@forward './base/index.scss';
+@forward './components/index.scss';
+@forward './mixins/index.scss';
+@forward './utils/index.scss';
+@forward './variables/index.scss';
 
 @import '@angular/cdk/overlay-prebuilt.css';

package/mixins/_editor-looks.scss

@@ -0,0 +1,23 @@
+@mixin solid-look() {
+  --ax-comp-editor-bg-color: var(--ax-sys-color-lightest-surface);
+  --ax-comp-editor-border-width: 1px;
+}
+@mixin fill-look() {
+  --ax-comp-editor-box-outline-width: 2px;
+  --ax-comp-editor-border-width: 0px;
+
+  --ax-comp-editor-bg-color: var(--ax-sys-color-surface);
+  --ax-comp-editor-text-color: var(--ax-sys-color-on-lighter-surface);
+  --ax-comp-editor-border-color: var(--ax-sys-color-border-lighter-surface);
+}
+@mixin outline-look() {
+  --ax-comp-editor-bg-color: 0, 0, 0, 0;
+  --ax-comp-editor-border-width: 1px;
+}
+@mixin flat-look() {
+  --ax-comp-editor-border-width: 2px;
+  --ax-comp-editor-border-radius: 0px;
+  --ax-comp-editor-box-outline-width: 0px;
+  border-width: 0px !important;
+  border-bottom-width: var(--ax-comp-editor-border-width) !important;
+}

package/mixins/_scroll-bar.scss

@@ -0,0 +1,23 @@
+@mixin scroll-bar() {
+  :root,
+  * {
+    --ax-sys-scroller-size-width: 5px;
+    --ax-sys-scroller-size-radius: 3px;
+    --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-darkest-surface));
+    --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-primary-surface));
+  }
+
+  ::-webkit-scrollbar {
+    width: var(--ax-sys-scroller-size-width);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--ax-sys-scroller-track-color);
+    border-radius: var(--ax-sys-scroller-size-radius);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--ax-sys-scroller-thumb-color);
+    border-radius: var(--ax-sys-scroller-size-radius);
+  }
+}

package/mixins/index.scss

@@ -0,0 +1,4 @@
+@forward './media';
+@forward './util';
+@forward './editor-looks';
+@forward './scroll-bar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "19.10.0-next.0",
+  "version": "19.10.0-next.10",
   "main": "index.js",
   "author": "Ali Safari",
   "license": "ISC",