@acorex/styles 19.10.0-next.1 → 19.10.0-next.11

package/src/shared/_editor-container.scss

@@ -1,291 +0,0 @@
-@use '../mixins/look';
-@use '../mixins/util';
-
-:root {
-  --ax-editor-font-size: 1rem;
-  --ax-editor-space-size: 1rem;
-}
-
-@include util.darkMode() {
-  .ax-editor-container {
-    &.ax-look-fill {
-      &:focus-within {
-        box-shadow: 0px 0px 0 2px rgba(var(--ax-color-primary-200));
-      }
-      &.ax-state-error {
-        background-color: rgba(var(--ax-color-danger-200));
-        color: rgba(var(--ax-color-danger-fore));
-
-        &:focus-within {
-          box-shadow: 0px 0px 0 2px rgba(var(--ax-color-danger-200));
-        }
-        .ax-input {
-          &::placeholder {
-            color: rgba(var(--ax-color-danger-200));
-          }
-        }
-      }
-    }
-    &.ax-look-flat {
-      &:focus-within {
-        border-color: rgba(var(--ax-color-primary-200));
-      }
-      &.ax-state-error {
-        border-color: rgba(var(--ax-color-danger-200));
-
-        .ax-input {
-          &::placeholder {
-            color: rgba(var(--ax-color-danger-200));
-          }
-        }
-      }
-    }
-    &.ax-look-solid,
-    &.ax-look-outline {
-      &:focus-within {
-        box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-200));
-        border-color: rgba(var(--ax-color-primary-200));
-      }
-
-      &.ax-state-error {
-        border-color: rgba(var(--ax-color-danger-200));
-        &:focus-within {
-          box-shadow: 0px 0px 0 1px rgba(var(--ax-color-danger-200));
-          border-color: rgba(var(--ax-color-danger-200));
-        }
-        .ax-input {
-          &::placeholder {
-            color: rgba(var(--ax-color-danger-200));
-          }
-        }
-      }
-    }
-  }
-}
-
-.ax-editor-container {
-  display: flex;
-  height: var(--ax-size-default);
-  width: 100%;
-  align-items: center;
-  overflow: hidden;
-  font-size: 0.875rem;
-  line-height: 1;
-  color: rgba(var(--ax-color-input-surface-fore));
-
-  .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-color-primary-500));
-    }
-  }
-
-  &.ax-state-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.ax-look-solid,
-  &.ax-look-outline {
-    @include look.solid-look();
-  }
-
-  &.ax-look-flat {
-    @include look.flat-look();
-  }
-
-  &.ax-look-outline {
-    @include look.outline-look();
-  }
-
-  &.ax-look-fill {
-    @include look.fill-look();
-  }
-
-  .ax-editor-input {
-    height: 100%;
-    flex: 1 1 0%;
-
-    .ax-input {
-      height: 100%;
-    }
-  }
-
-  .ax-input {
-    padding: 0 calc(var(--ax-editor-font-size) - 4px);
-    font-size: var(--ax-editor-font-size);
-    line-height: var(--ax-editor-font-size);
-    cursor: inherit;
-    &::placeholder {
-      font-size: inherit;
-      font-weight: 400;
-      color: rgb(var(--ax-color-input-surface-fore), 0.5);
-    }
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-      outline: none;
-    }
-  }
-
-  &.ax-xs {
-    .ax-input {
-      padding: 0 calc(var(--ax-editor-space-size) - 8px);
-      font-size: calc(var(--ax-editor-font-size) - 4px);
-      line-height: 1rem;
-    }
-  }
-
-  &.ax-sm {
-    .ax-input {
-      padding: 0 calc(var(--ax-editor-space-size) - 4px);
-      font-size: calc(var(--ax-editor-font-size) - 2px);
-      line-height: calc(var(--ax-editor-font-size) - 2px);
-    }
-  }
-
-  &.ax-md {
-    .ax-input {
-      padding: 0 calc(var(--ax-editor-space-size) - 4px);
-      font-size: var(--ax-editor-font-size);
-      line-height: var(--ax-editor-font-size);
-    }
-  }
-
-  &.ax-lg {
-    .ax-input {
-      padding: 0 var(--ax-editor-space-size);
-      font-size: calc(var(--ax-editor-font-size) + 2px);
-      line-height: calc(var(--ax-editor-font-size) + 2px);
-    }
-  }
-
-  &.ax-xl {
-    .ax-input {
-      padding: 0 var(--ax-editor-space-size);
-      font-size: calc(var(--ax-editor-font-size) + 4px);
-      line-height: calc(var(--ax-editor-font-size) + 4px);
-    }
-  }
-
-  .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-color-input-surface-fore));
-  }
-
-  &.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: 400;
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-
-  .ax-text-area {
-    padding: 0.625rem;
-  }
-  & > ax-prefix {
-    *,
-    .ax-button,
-    ax-title {
-      border-end-start-radius: 0.25rem;
-      border-start-start-radius: 0.25rem;
-    }
-
-    ax-icon {
-      padding-left: 0.75rem;
-      padding-right: 0.75rem;
-    }
-  }
-
-  & > ax-suffix {
-    *,
-    .ax-button,
-    ax-title {
-      border-end-end-radius: 0.25rem;
-      border-start-end-radius: 0.25rem;
-    }
-  }
-
-  & > 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 {
-      // @apply ax-px-4;
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-
-    & > ax-text {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: transparent;
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-    }
-  }
-
-  .ax-button {
-    height: 100% !important;
-    border-radius: 0px !important;
-
-    &.ax-button-icon {
-      height: 100%;
-      width: var(--ax-size-default);
-    }
-  }
-}
-
-.ax-ripple {
-  transform: scale(0);
-  animation: ripple 500ms linear;
-  position: absolute;
-  border-radius: 9999rem !important;
-
-  @keyframes ripple {
-    to {
-      transform: scale(4);
-      opacity: 0;
-    }
-  }
-}

package/src/shared/_inputs.scss

@@ -1,16 +0,0 @@
-.ax-input {
-  // @apply ax-p-0 ax-outline-0;
-  font-size: inherit;
-  padding: 0px;
-  outline-width: 0px;
-
-  &:focus {
-    // @apply ax-outline-transparent;
-    outline-color: transparent;
-  }
-  // &.ax-state-disabled {
-  //   // @apply ax-cursor-not-allowed ax-opacity-50;
-  //   cursor: not-allowed;
-  //   opacity: 0.5;
-  // }
-}

package/src/shared/_utils.scss

@@ -1,85 +0,0 @@
-@use '../variables/index.scss';
-@use '../mixins/util';
-
-[class*=' ax-icon-'],
-[class^='ax-icon-'] {
-  vertical-align: middle;
-}
-
-.ax-bold {
-  font-weight: bold !important;
-}
-
-.ax-fieldset {
-  // @apply ax-rounded-default ax-border ax-border-default ax-p-3;
-  border-radius: var(--ax-rounded-border-default);
-  border-width: 1px;
-  border-color: rgba(var(--ax-color-input-border));
-  padding: 0.75rem /* 12px */;
-
-  legend {
-    // @apply ax-px-1 ax-text-sm;
-    padding-left: 0.25rem /* 4px */;
-    padding-right: 0.25rem /* 4px */;
-    font-size: 0.875rem /* 14px */;
-    line-height: 1.25rem /* 20px */;
-  }
-}
-
-.ax-card {
-  // @apply ax-rounded-default ax-border ax-border-default ax-bg-surface;
-  border-radius: var(--ax-rounded-border-default);
-  border-width: 1px;
-  border-color: rgba(var(--ax-color-input-border));
-  background-color: rgba(var(--ax-color-surface));
-}
-
-.ax-drop-zone {
-  > input {
-    // @apply ax-absolute ax-h-full ax-w-full ax-cursor-pointer ax-opacity-0;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-    opacity: 0;
-  }
-}
-.ax-uploader-overlay-state {
-  // @apply ax-pointer-events-none ax-absolute ax-start-0 ax-top-0 ax-z-10 ax-flex ax-h-full ax-w-full ax-cursor-pointer ax-flex-col ax-items-center ax-justify-center ax-gap-2 ax-bg-primary-200/75 ax-text-sm ax-text-primary-fore-tint ax-outline-dashed ax-outline-2 -ax-outline-offset-4 ax-transition-all;
-  border-radius: inherit;
-  pointer-events: none;
-  position: absolute;
-  inset-inline-start: 0px;
-  top: 0px;
-  z-index: 10;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  cursor: pointer;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem /* 8px */;
-  background-color: rgba(var(--ax-color-primary-200), 0.75);
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
-  color: rgba(var(--ax-color-primary-fore-tint));
-  outline-style: dashed;
-  outline-offset: -4px;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.ax-select-none,
-.ax-select-none * {
-  user-select: none !important;
-}
-@include util.darkMode() {
-  .ax-uploader-overlay-state {
-    // @apply ax-bg-primary-800/75 ax-text-primary-fore ax-outline-primary-fore;
-    background-color: rgba(var(--ax-color-primary-800), 0.75);
-    color: rgba(var(--ax-color-primary-fore));
-    outline-color: rgba(var(--ax-color-primary-fore));
-  }
-}

package/src/utility/index.scss

@@ -1,24 +0,0 @@
-.ax-xs {
-  --ax-size-default: calc(var(--ax-size-base) - 0.75rem);
-}
-
-.ax-sm {
-  --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
-}
-
-.ax-md {
-  --ax-size-default: var(--ax-size-base);
-}
-
-.ax-lg {
-  --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
-}
-
-.ax-xl {
-  --ax-size-default: calc(var(--ax-size-base) + 1rem);
-}
-
-.ax-placeholder {
-  color: rgba(var(--ax-color-input-surface-fore), 0.5);
-  font-weight: 500;
-}

package/src/variables/_colors.scss

@@ -1,2 +0,0 @@
-$color_names: 'primary', 'success', 'warning', 'danger', 'neutral';
-$look_names: 'solid', 'twotone', 'outline', 'blank', 'link';

package/src/variables/_degrees.scss

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

package/src/variables/index.scss

@@ -1,2 +0,0 @@
-@forward './colors';
-@forward './degrees';

package/themes/default.css

@@ -1 +0,0 @@
-:root,.ax-light{--ax-size-base: 2.5rem;--ax-size-default: var(--ax-size-base);--ax-icon-weight: 400;--ax-icon-size: 100%;--ax-rounded-border-default: 0.5rem;--ax-color-border-default: 233, 234, 235;--ax-color-background-default: 249, 250, 251;--ax-color-text-default: 22, 22, 22;--ax-color-surface: 255, 255, 255;--ax-color-surface-fore: 22, 22, 22;--ax-color-on-surface: 250, 250, 250;--ax-color-on-surface-fore: 22, 22, 22;--ax-color-input-surface: 255, 255, 255;--ax-color-input-surface-fore: 22, 22, 22;--ax-color-input-border: 213, 215, 218;--ax-color-ghost: 255, 255, 255;--ax-color-ghost-fore: 22, 22, 22;--ax-color-primary-fore: 255, 255, 255;--ax-color-primary-fore-tint: 11, 30, 71;--ax-color-primary-50: 244, 247, 254;--ax-color-primary-100: 233, 239, 253;--ax-color-primary-200: 190, 208, 249;--ax-color-primary-300: 146, 177, 245;--ax-color-primary-400: 102, 146, 241;--ax-color-primary-500: 37, 99, 235;--ax-color-primary-600: 33, 89, 212;--ax-color-primary-700: 26, 69, 165;--ax-color-primary-800: 19, 50, 118;--ax-color-primary-900: 11, 30, 71;--ax-color-primary-950: 4, 10, 23;--ax-color-secondary-fore: 255, 255, 255;--ax-color-secondary-fore-tint: 9, 12, 18;--ax-color-secondary-50: 244, 244, 245;--ax-color-secondary-100: 233, 234, 235;--ax-color-secondary-200: 188, 191, 196;--ax-color-secondary-300: 143, 148, 157;--ax-color-secondary-400: 98, 105, 118;--ax-color-secondary-500: 30, 41, 59;--ax-color-secondary-600: 27, 37, 53;--ax-color-secondary-700: 21, 29, 41;--ax-color-secondary-800: 15, 21, 30;--ax-color-secondary-900: 9, 12, 18;--ax-color-secondary-950: 3, 4, 6;--ax-color-success-fore: 255, 255, 255;--ax-color-success-fore-tint: 6, 78, 59;--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-success-950: 2, 44, 34;--ax-color-warning-fore: 48, 26, 10;--ax-color-warning-fore-tint: 255, 111, 0;--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-warning-950: 72, 40, 15;--ax-color-danger-fore: 255, 255, 255;--ax-color-danger-fore-tint: 127, 29, 29;--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-danger-950: 69, 10, 10;--ax-color-info-fore: 255, 255, 255;--ax-color-info-fore-tint: 49, 46, 129;--ax-color-info-50: 238, 242, 255;--ax-color-info-100: 224, 231, 255;--ax-color-info-200: 199, 210, 254;--ax-color-info-300: 165, 180, 252;--ax-color-info-400: 129, 140, 248;--ax-color-info-500: 99, 102, 241;--ax-color-info-600: 79, 70, 229;--ax-color-info-700: 67, 56, 202;--ax-color-info-800: 55, 48, 163;--ax-color-info-900: 49, 46, 129;--ax-color-info-950: 30, 27, 75;--ax-color-neutral-fore: 255, 255, 255;--ax-color-neutral-fore-tint: 17, 24, 39;--ax-color-neutral-50: 249, 250, 251;--ax-color-neutral-100: 243, 244, 246;--ax-color-neutral-200: 229, 231, 235;--ax-color-neutral-300: 209, 213, 219;--ax-color-neutral-400: 156, 163, 175;--ax-color-neutral-500: 107, 114, 128;--ax-color-neutral-600: 75, 85, 99;--ax-color-neutral-700: 55, 65, 81;--ax-color-neutral-800: 31, 41, 55;--ax-color-neutral-900: 17, 24, 39;--ax-color-neutral-950: 3, 7, 18}.ax-dark{--ax-color-border-default: 34, 38, 47;--ax-color-background-default: 12, 14, 18;--ax-color-text-default: 255, 255, 255;--ax-color-surface: 19, 22, 27;--ax-color-surface-fore: 255, 255, 255;--ax-color-on-surface: 34, 38, 47;--ax-color-on-surface-fore: 255, 255, 255;--ax-color-input-surface: 12, 14, 18;--ax-color-input-surface-fore: 224, 224, 224;--ax-color-input-border: 55, 58, 65;--ax-color-ghost: 77, 91, 113;--ax-color-ghost-fore: 255, 255, 255}