@acorex/styles 22.0.0-next.9 → 22.1.0-next.1

package/components/_actionsheet.css

@@ -1,4 +1,11 @@
 .ax-action-sheet-panel {
+  --ax-comp-action-sheet-shadow-rest: var(--ax-sys-effect-modal);
+  --ax-comp-action-sheet-inner-border-rest: var(--ax-sys-inner-border-surface);
+  --ax-comp-action-sheet-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);
+  --ax-comp-action-sheet-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);
+  --ax-comp-action-sheet-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);
+  --ax-comp-action-sheet-surface-overlay-rest: var(--ax-sys-surface-overlay-modal);
+
   @apply fixed! top-auto! right-auto! bottom-0! left-1/2! block! h-auto! w-auto! max-w-none!;
   transform: translateX(-50%) !important;
   align-items: unset !important;
@@ -8,10 +15,20 @@
   border-top-left-radius: var(--ax-comp-action-sheet-border-radius-size);
   border-top-right-radius: var(--ax-comp-action-sheet-border-radius-size);
   background-color: rgba(var(--ax-sys-color-surface-lowest));
-  --ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);
+  background-image:
+    linear-gradient(
+      var(--ax-comp-action-sheet-contrast-surface-overlay-rest),
+      var(--ax-comp-action-sheet-contrast-surface-overlay-rest)
+    ),
+    linear-gradient(
+      var(--ax-comp-action-sheet-surface-overlay-rest),
+      var(--ax-comp-action-sheet-surface-overlay-rest)
+    );
   box-shadow:
-    var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
+    var(--ax-comp-action-sheet-contrast-inner-border-rest), var(--ax-comp-action-sheet-inner-border-rest),
+    var(--ax-comp-action-sheet-shadow-rest);
+  backdrop-filter: var(--ax-comp-action-sheet-backdrop-filter-rest);
+  -webkit-backdrop-filter: var(--ax-comp-action-sheet-backdrop-filter-rest);
   animation: 1s both ax-fadeInUp;
   animation-duration: var(--ax-sys-transition-duration);
 }

package/components/_drop-down.css

@@ -7,9 +7,7 @@
     overflow-x: auto;
     overflow-y: hidden;
     font-size: 0.875rem;
-    /* 14px */
     line-height: 1.25rem;
-    /* 20px */
     text-transform: capitalize;
     &.ax-state-disabled {
       cursor: not-allowed;
@@ -19,28 +17,51 @@
 }
 
 .ax-overlay-pane {
+  --ax-comp-dropdown-shadow-rest: var(--ax-sys-effect-overlay);
+  --ax-comp-dropdown-inner-border-rest: var(--ax-sys-inner-border-surface);
+  --ax-comp-dropdown-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);
+  --ax-comp-dropdown-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);
+  --ax-comp-dropdown-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);
+  --ax-comp-dropdown-surface-overlay-rest: var(--ax-sys-surface-overlay-overlay);
+
   margin: 0.25rem 0;
-  /* min-width: 10rem; */
   width: 100%;
   height: fit-content;
   overflow: hidden;
   border-width: 1px;
   border-color: rgba(var(--ax-sys-color-border-lightest-surface));
+  /* Resolve text against local theme tokens (overlays are portaled). */
+  color: rgba(var(--ax-sys-color-on-surface));
+  /*
+   * Use opaque rgba(channels) only.
+   * Do NOT use rgb(channels / alpha) or rgba(channels, alpha):
+   * LightningCSS rewrites those to slash-syntax which is invalid with
+   * comma-separated RGB tokens (255, 255, 255) and yields a transparent panel.
+   */
   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);
+  background-image:
+    linear-gradient(
+      var(--ax-comp-dropdown-contrast-surface-overlay-rest),
+      var(--ax-comp-dropdown-contrast-surface-overlay-rest)
+    ),
+    linear-gradient(
+      var(--ax-comp-dropdown-surface-overlay-rest),
+      var(--ax-comp-dropdown-surface-overlay-rest)
+    );
   box-shadow:
-    var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
+    var(--ax-comp-dropdown-contrast-inner-border-rest), var(--ax-comp-dropdown-inner-border-rest),
+    var(--ax-comp-dropdown-shadow-rest);
+  backdrop-filter: var(--ax-comp-dropdown-backdrop-filter-rest);
+  -webkit-backdrop-filter: var(--ax-comp-dropdown-backdrop-filter-rest);
   border-top-left-radius: var(--ax-comp-drop-down-border-top-left-radius, var(--ax-sys-border-radius));
   border-top-right-radius: var(--ax-comp-drop-down-border-top-right-radius, var(--ax-sys-border-radius));
   border-bottom-left-radius: var(--ax-comp-drop-down-border-bottom-left-radius, var(--ax-sys-border-radius));
   border-bottom-right-radius: var(--ax-comp-drop-down-border-bottom-right-radius, var(--ax-sys-border-radius));
-  /* Replace the @include mixin with a normal media query */
+
   ax-header,
   ax-footer {
     background-color: rgba(var(--ax-sys-color-lightest-surface));
     padding: 0.75rem;
-    /* 12px */
   }
 
   &.ax-overlay-center {
@@ -58,9 +79,13 @@
   }
 }
 
-.dark {
+.ax-dark .ax-overlay-pane {
+  background-color: rgba(var(--ax-sys-color-darker-surface));
+  border-color: rgba(var(--ax-sys-color-border-darker-surface));
+}
+
+@supports not (backdrop-filter: blur(1px)) {
   .ax-overlay-pane {
-    background-color: rgba(var(--ax-sys-color-darker-surface));
-    border-color: rgba(var(--ax-sys-color-border-darker-surface));
+    --ax-comp-dropdown-backdrop-filter-rest: none;
   }
 }

package/components/_editor-container.css

@@ -2,7 +2,56 @@
 
 @layer base {
   .ax-editor-container {
+    --ax-comp-editor-shadow-rest: var(--ax-sys-effect-field-rest);
+    --ax-comp-editor-shadow-hover: var(--ax-sys-effect-field-hover);
+    --ax-comp-editor-shadow-focus: var(--ax-sys-effect-field-focus);
+    --ax-comp-editor-shadow-readonly: var(--ax-sys-effect-field-readonly);
+    --ax-comp-editor-shadow-disabled: var(--ax-sys-effect-field-disabled);
+    --ax-comp-editor-surface-overlay-rest: var(--ax-sys-surface-overlay-field-rest);
+    --ax-comp-editor-surface-overlay-hover: var(--ax-sys-surface-overlay-field-hover);
+    --ax-comp-editor-surface-overlay-focus: var(--ax-sys-surface-overlay-field-focus);
+    --ax-comp-editor-surface-overlay-readonly: var(--ax-sys-surface-overlay-field-readonly);
+    --ax-comp-editor-surface-overlay-disabled: var(--ax-sys-surface-overlay-field-disabled);
+    --ax-comp-editor-highlight-rest: var(--ax-sys-highlight-control-subtle);
+    --ax-comp-editor-inner-border-rest: var(--ax-sys-inner-border-control);
+    --ax-comp-editor-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-field);
+    --ax-comp-editor-contrast-inner-border-hover: var(--ax-sys-contrast-inner-border-field);
+    --ax-comp-editor-contrast-inner-border-focus: var(--ax-sys-contrast-inner-border-field);
+    --ax-comp-editor-contrast-inner-border-invalid: var(--ax-sys-contrast-inner-border-invalid);
+    --ax-comp-editor-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-field);
+    --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-rest);
+    --ax-comp-editor-transition-duration: var(--ax-sys-motion-duration);
+    --ax-comp-editor-transition-timing: var(--ax-sys-motion-timing);
+
     @apply rounded-default h-default min-h-default relative flex items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
+    /*
+     * Field inset/elevation only on the host. Contrast border is painted on ::after
+     * so native controls (textarea) cannot cover it.
+     */
+    box-shadow: var(--ax-comp-editor-shadow-rest);
+    background-image:
+      linear-gradient(
+        var(--ax-comp-editor-contrast-surface-overlay-rest),
+        var(--ax-comp-editor-contrast-surface-overlay-rest)
+      ),
+      linear-gradient(
+        var(--ax-comp-editor-surface-overlay-rest),
+        var(--ax-comp-editor-surface-overlay-rest)
+      );
+    transform: none;
+    transition-property: box-shadow, border-color, background-color, color;
+    transition-duration: var(--ax-comp-editor-transition-duration);
+    transition-timing-function: var(--ax-comp-editor-transition-timing);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      z-index: 1;
+      box-shadow: var(--ax-comp-editor-contrast-ring);
+    }
 
     .ax-content {
       @apply text-sm;
@@ -27,30 +76,55 @@
     }
 
     &.ax-state-error {
-      @apply border-danger-600!;
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-invalid);
+      border-color: var(--ax-sys-contrast-border-invalid);
+
       &:focus-within {
-        @apply outline-danger-light outline-2 outline-offset-0;
+        --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-invalid);
+        outline: var(--ax-sys-contrast-focus-ring-invalid);
+        outline-offset: 0;
       }
     }
 
-    /* Keep end padding for spin/clear controls, but not when a suffix button is attached */
     &:has(.ax-general-button-control, .ax-general-button-icon):not(:has(ax-suffix > ax-button)) {
       @apply pe-2;
     }
 
-    ax-suffix > ax-icon,
-    ax-prefix > ax-icon {
-      @apply text-muted;
-    }
-
     ax-prefix,
     ax-suffix {
       @apply flex items-center gap-2 self-stretch;
     }
 
+    /*
+     * Unified adornments (icon / text / kbd) inside prefix & suffix.
+     * Buttons keep their own look and stretch rules below.
+     */
+    ax-prefix:not(:has(> ax-button)),
+    ax-suffix:not(:has(> ax-button)) {
+      @apply shrink-0 items-center self-center;
+
+      > ax-icon,
+      > ax-text,
+      > ax-kbd {
+        @apply text-muted inline-flex max-h-full max-w-full items-center justify-center leading-none;
+      }
+
+      > ax-icon {
+        @apply size-4 text-sm;
+      }
+
+      > ax-text {
+        @apply text-sm whitespace-nowrap;
+      }
+
+      > ax-kbd {
+        @apply shrink-0;
+      }
+    }
+
     ax-prefix:has(> ax-button),
     ax-suffix:has(> ax-button) {
-      @apply items-stretch;
+      @apply size-auto! w-auto! max-h-none! shrink-0 items-stretch! self-stretch!;
     }
 
     ax-prefix {
@@ -59,7 +133,6 @@
   }
 }
 
-/* Components layer so these beat button size utilities and spin-button pe-2 */
 @layer components {
   .ax-editor-container {
     &:has(ax-prefix > ax-button),
@@ -87,5 +160,99 @@
         @apply aspect-square size-auto! h-full w-auto!;
       }
     }
+
+    /* Field appearance — recessed inset for all looks; never outer elevation */
+    &:is(.ax-solid, .ax-outline, .ax-twotone, .ax-fill, .ax-flat, .ax-blank) {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-rest);
+      box-shadow: var(--ax-comp-editor-shadow-rest);
+      background-image:
+        linear-gradient(
+          var(--ax-comp-editor-contrast-surface-overlay-rest),
+          var(--ax-comp-editor-contrast-surface-overlay-rest)
+        ),
+        linear-gradient(
+          var(--ax-comp-editor-surface-overlay-rest),
+          var(--ax-comp-editor-surface-overlay-rest)
+        );
+      transform: none;
+    }
+
+    &:is(.ax-solid, .ax-outline, .ax-twotone, .ax-fill, .ax-flat, .ax-blank):hover:not(
+        .ax-state-disabled,
+        .ax-state-readonly,
+        .ax-state-error
+      ) {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-hover);
+      box-shadow: var(--ax-comp-editor-shadow-hover);
+      background-image:
+        linear-gradient(
+          var(--ax-comp-editor-contrast-surface-overlay-rest),
+          var(--ax-comp-editor-contrast-surface-overlay-rest)
+        ),
+        linear-gradient(
+          var(--ax-comp-editor-surface-overlay-hover),
+          var(--ax-comp-editor-surface-overlay-hover)
+        );
+    }
+
+    &:is(.ax-solid, .ax-outline, .ax-twotone, .ax-fill, .ax-flat, .ax-blank).ax-state-readonly {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-rest);
+      box-shadow: var(--ax-comp-editor-shadow-readonly);
+      background-image:
+        linear-gradient(
+          var(--ax-comp-editor-contrast-surface-overlay-rest),
+          var(--ax-comp-editor-contrast-surface-overlay-rest)
+        ),
+        linear-gradient(
+          var(--ax-comp-editor-surface-overlay-readonly),
+          var(--ax-comp-editor-surface-overlay-readonly)
+        );
+    }
+
+    &:is(.ax-solid, .ax-outline, .ax-twotone, .ax-fill, .ax-flat, .ax-blank).ax-state-disabled {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-rest);
+      box-shadow: var(--ax-comp-editor-shadow-disabled);
+      background-image:
+        linear-gradient(
+          var(--ax-comp-editor-contrast-surface-overlay-rest),
+          var(--ax-comp-editor-contrast-surface-overlay-rest)
+        ),
+        linear-gradient(
+          var(--ax-comp-editor-surface-overlay-disabled),
+          var(--ax-comp-editor-surface-overlay-disabled)
+        );
+      opacity: var(--ax-sys-contrast-disabled-opacity, 1);
+    }
+
+    &:is(.ax-solid, .ax-outline, .ax-twotone, .ax-fill, .ax-flat, .ax-blank):focus-within:not(
+        .ax-state-disabled,
+        .ax-state-readonly,
+        .ax-state-error
+      ) {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-focus);
+      box-shadow: var(--ax-comp-editor-shadow-focus);
+      background-image:
+        linear-gradient(
+          var(--ax-comp-editor-contrast-surface-overlay-rest),
+          var(--ax-comp-editor-contrast-surface-overlay-rest)
+        ),
+        linear-gradient(
+          var(--ax-comp-editor-surface-overlay-focus),
+          var(--ax-comp-editor-surface-overlay-focus)
+        );
+    }
+
+    &.ax-state-error {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-invalid);
+      border-color: var(--ax-sys-contrast-border-invalid);
+      box-shadow: var(--ax-comp-editor-shadow-rest);
+
+      &:focus-within {
+        --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-invalid);
+        box-shadow: var(--ax-comp-editor-shadow-focus);
+        outline: var(--ax-sys-contrast-focus-ring-invalid);
+        outline-offset: 0;
+      }
+    }
   }
 }

package/components/_floating-surface.css

@@ -0,0 +1,24 @@
+/*
+ * Floating overlays opt out of Appearance + Contrast decorative boundaries.
+ * Theme (ax-light / ax-dark) and size still inherit from overlay visual context.
+ *
+ * Loaded after contrast/appearance theme sheets so these resets win on-pane.
+ */
+:is(.ax-popup, ax-toast, .ax-overlay-pane, .ax-dialog) {
+  --ax-sys-contrast-inner-border-surface: 0 0 #0000;
+  --ax-sys-contrast-surface-overlay-surface: transparent;
+
+  --ax-sys-inner-border-surface: 0 0 #0000;
+  --ax-sys-highlight-surface: 0 0 #0000;
+  --ax-sys-gradient-surface: none;
+  --ax-sys-backdrop-filter-surface: none;
+  --ax-sys-surface-overlay-surface: transparent;
+  --ax-sys-surface-overlay-floating: transparent;
+  --ax-sys-surface-overlay-overlay: transparent;
+  --ax-sys-surface-overlay-modal: transparent;
+
+  /* Flat elevation — ignore depth/translucent shadow stacks on floating shells */
+  --ax-sys-effect-floating: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --ax-sys-effect-overlay: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --ax-sys-effect-modal: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}

package/components/_list.css

@@ -1,4 +1,4 @@
-.dark {
+.ax-dark {
   .ax-list-item {
     &.ax-state-selected {
       background-color: rgba(var(--ax-sys-color-primary-800)) !important;
@@ -99,6 +99,7 @@
           padding-inline-start: 0.75rem;
           font-size: 1rem;
           line-height: 1.5rem;
+          color: rgba(var(--ax-sys-color-on-surface));
           &:focus,
           &:focus-visible {
             outline-width: 2px;

package/components/index.css

@@ -3,10 +3,10 @@
 @import './_check-box.css';
 @import './_drop-down.css';
 @import './_editor-container.css';
+@import './_floating-surface.css';
 @import './_general-button.css';
 @import './_list.css';
 @import './_radio.css';
 @import './_ripple.css';
 @import './_table.css';
-@import './_uploader.css';
-@import './_conversation-picker-popup.css';
+@import './_uploader.css';

package/icons/lucide/_variables.css

@@ -0,0 +1,229 @@
+:root {
+  --ax-icon-more-horizontal: '\e0b6';
+  --ax-icon-more-horizontal-after: '';
+
+  --ax-icon-more-vertical: '\e0b7';
+  --ax-icon-more-vertical-after: '';
+
+  --ax-icon-arrow-long-up: '\e491';
+  --ax-icon-arrow-long-up-after: '';
+
+  --ax-icon-arrow-long-down: '\e48c';
+  --ax-icon-arrow-long-down-after: '';
+
+  --ax-icon-color-palette: '\e1dd';
+  --ax-icon-color-palette-after: '';
+
+  --ax-icon-arrow-left: '\e1e2';
+  --ax-icon-arrow-left-after: '';
+
+  --ax-icon-arrow-down: '\e1e1';
+  --ax-icon-arrow-down-after: '';
+
+  --ax-icon-arrow-up: '\e1e4';
+  --ax-icon-arrow-up-after: '';
+
+  --ax-icon-arrow-right: '\e1e3';
+  --ax-icon-arrow-right-after: '';
+
+  --ax-icon-chevron-left: '\e06e';
+  --ax-icon-chevron-left-after: '';
+
+  --ax-icon-chevron-down: '\e06d';
+  --ax-icon-chevron-down-after: '';
+
+  --ax-icon-chevron-up: '\e070';
+  --ax-icon-chevron-up-after: '';
+
+  --ax-icon-chevron-right: '\e06f';
+  --ax-icon-chevron-right-after: '';
+
+  --ax-icon-chevron-double-right: '\e073';
+  --ax-icon-chevron-double-right-after: '';
+
+  --ax-icon-chevron-double-left: '\e072';
+  --ax-icon-chevron-double-left-after: '';
+
+  --ax-icon-first-page: '\e457';
+  --ax-icon-first-page-after: '';
+
+  --ax-icon-last-page: '\e459';
+  --ax-icon-last-page-after: '';
+
+  --ax-icon-calendar: '\e063';
+  --ax-icon-calendar-after: '';
+
+  --ax-icon-info: '\e0f9';
+  --ax-icon-info-after: '';
+
+  --ax-icon-error: '\e077';
+  --ax-icon-error-after: '';
+
+  --ax-icon-warning: '\e193';
+  --ax-icon-warning-after: '';
+
+  --ax-icon-check: '\e06c';
+  --ax-icon-check-after: '';
+
+  --ax-icon-check-circle: '\e226';
+  --ax-icon-check-circle-after: '';
+
+  --ax-icon-dobble-check: '\e38e';
+  --ax-icon-dobble-check-after: '';
+
+  --ax-icon-close: '\e1b2';
+  --ax-icon-close-after: '';
+
+  --ax-icon-clear: '\e084';
+  --ax-icon-clear-after: '';
+
+  --ax-icon-visibility-off: '\e62e';
+  --ax-icon-visibility-off-after: '';
+
+  --ax-icon-visibility: '\e0ba';
+  --ax-icon-visibility-after: '';
+
+  --ax-icon-unfold-more: '\e211';
+  --ax-icon-unfold-more-after: '';
+
+  --ax-icon-download: '\e0b2';
+  --ax-icon-download-after: '';
+
+  --ax-icon-upload: '\e19e';
+  --ax-icon-upload-after: '';
+
+  --ax-icon-search: '\e151';
+  --ax-icon-search-after: '';
+
+  --ax-icon-copy: '\e09e';
+  --ax-icon-copy-after: '';
+
+  --ax-icon-refresh: '\e145';
+  --ax-icon-refresh-after: '';
+
+  --ax-icon-inbox: '\e0f7';
+  --ax-icon-inbox-after: '';
+
+  --ax-icon-emoji: '\e164';
+  --ax-icon-emoji-after: '';
+
+  --ax-icon-attach: '\e12d';
+  --ax-icon-attach-after: '';
+
+  --ax-icon-mic: '\e118';
+  --ax-icon-mic-after: '';
+
+  --ax-icon-send: '\e152';
+  --ax-icon-send-after: '';
+
+  --ax-icon-play: '\e13c';
+  --ax-icon-play-after: '';
+
+  --ax-icon-pause: '\e12e';
+  --ax-icon-pause-after: '';
+
+  --ax-icon-reload: '\e149';
+  --ax-icon-reload-after: '';
+
+  --ax-icon-heart: '\e0f2';
+  --ax-icon-heart-after: '';
+
+  --ax-icon-comment: '\e116';
+  --ax-icon-comment-after: '';
+
+  --ax-icon-bold: '\e05d';
+  --ax-icon-bold-after: '';
+
+  --ax-icon-italic: '\e0fb';
+  --ax-icon-italic-after: '';
+
+  --ax-icon-strike: '\e177';
+  --ax-icon-strike-after: '';
+
+  --ax-icon-under-line: '\e19a';
+  --ax-icon-under-line-after: '';
+
+  --ax-icon-order-list: '\e1d1';
+  --ax-icon-order-list-after: '';
+
+  --ax-icon-un-order-list: '\e106';
+  --ax-icon-un-order-list-after: '';
+
+  --ax-icon-align-left: '\e185';
+  --ax-icon-align-left-after: '';
+
+  --ax-icon-align-right: '\e183';
+  --ax-icon-align-right-after: '';
+
+  --ax-icon-align-center: '\e182';
+  --ax-icon-align-center-after: '';
+
+  --ax-icon-align-justify: '\e184';
+  --ax-icon-align-justify-after: '';
+
+  --ax-icon-undo: '\e2a1';
+  --ax-icon-undo-after: '';
+
+  --ax-icon-redo: '\e2a0';
+  --ax-icon-redo-after: '';
+
+  --ax-icon-highlight: '\e0f4';
+  --ax-icon-highlight-after: '';
+
+  --ax-icon-link: '\e102';
+  --ax-icon-link-after: '';
+
+  --ax-icon-image: '\e0f6';
+  --ax-icon-image-after: '';
+
+  --ax-icon-pen: '\e12f';
+  --ax-icon-pen-after: '';
+
+  --ax-icon-eraser: '\e28f';
+  --ax-icon-eraser-after: '';
+
+  --ax-icon-pen-ruler: '\e4f1';
+  --ax-icon-pen-ruler-after: '';
+
+  --ax-icon-crop: '\e0ab';
+  --ax-icon-crop-after: '';
+
+  --ax-icon-full-screen: '\e112';
+  --ax-icon-full-screen-after: '';
+
+  --ax-icon-up-folder: '\e0a7';
+  --ax-icon-up-folder-after: '';
+
+  --ax-icon-sort: '\e04c';
+  --ax-icon-sort-after: '';
+
+  --ax-icon-menu: '\e115';
+  --ax-icon-menu-after: '';
+
+  --ax-icon-plus: '\e13d';
+  --ax-icon-plus-after: '';
+
+  --ax-icon-trash: '\e18d';
+  --ax-icon-trash-after: '';
+
+  --ax-icon-arrow-turn-right: '\e0a8';
+  --ax-icon-arrow-turn-right-after: '';
+
+  --ax-icon-arrow-turn-left: '\e0a7';
+  --ax-icon-arrow-turn-left-after: '';
+
+  --ax-icon-save: '\e14d';
+  --ax-icon-save-after: '';
+
+  --ax-icon-minimize: '\e11b';
+  --ax-icon-minimize-after: '';
+
+  --ax-icon-maximize: '\e113';
+  --ax-icon-maximize-after: '';
+
+  --ax-icon-code: '\e093';
+  --ax-icon-code-after: '';
+
+  --ax-icon-paragraph: '\e3a3';
+  --ax-icon-paragraph-after: '';
+}