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

package/index.css

@@ -426,7 +426,6 @@ body {
   --ax-comp-editor-border-width: 1px;
   --ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color));
   border-width: var(--ax-comp-editor-border-width);
-  box-shadow: var(--ax-comp-editor-box-shadow);
 }
 .ax-editor-container.ax-solid:focus, .ax-editor-container.ax-solid:focus-within, .ax-editor-container.ax-solid:focus-visible {
   --ax-comp-editor-border-color: var(--ax-sys-color-primary-500);
@@ -434,7 +433,7 @@ body {
 }
 
 .ax-editor-container.ax-fill {
-  --ax-comp-editor-bg-color: var(--ax-sys-surface-low-bg-color);
+  --ax-comp-editor-bg-color: var(--ax-sys-surface-bg-color);
   --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
   --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
   --ax-comp-editor-border-color: transparent;
@@ -485,6 +484,7 @@ body {
   height: var(--ax-comp-editor-height);
   width: 100%;
   overflow: hidden;
+  position: relative;
 }
 .ax-editor-container ax-prefix {
   max-width: fit-content;
@@ -609,7 +609,7 @@ body {
   overflow: hidden;
   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-surface-bg-color));
+  background-color: rgba(var(--ax-sys-surface-lowest-bg-color));
   --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);
   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);
@@ -781,7 +781,7 @@ body {
 
 .ax-dark .ax-list-item.ax-state-selected {
   background-color: rgba(var(--ax-sys-color-primary-800)) !important;
-  color: rgba(var(--ax-sys-color-primary-text)) !important;
+  color: rgba(var(--ax-sys-color-on-primary)) !important;
 }
 
 .ax-list {
@@ -892,17 +892,17 @@ body {
 }
 .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-selected {
   background-color: rgba(var(--ax-sys-color-primary-500), var(--tw-bg-opacity)) !important;
-  color: rgba(var(--ax-sys-color-primary-text), var(--tw-text-opacity)) !important;
+  color: rgba(var(--ax-sys-color-on-primary), var(--tw-text-opacity)) !important;
 }
 .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus-visible, .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:hover {
-  background-color: rgba(var(--ax-color-on-surface));
+  background-color: rgba(var(--ax-sys-surface-high-bg-color));
 }
 .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-focus {
-  background-color: rgba(var(--ax-color-on-surface));
+  background-color: rgba(var(--ax-sys-surface-high-bg-color));
 }
 .ax-list .ax-content.ax-list-items-container .ax-list-loading-container {
   display: flex;
@@ -950,7 +950,7 @@ body {
 }
 
 .ax-dark .ax-table thead {
-  background-color: rgba(var(--ax-color-on-surface));
+  background-color: rgba(var(--ax-sys-surface-high-bg-color));
 }
 
 .ax-table {
@@ -975,7 +975,7 @@ body {
 .ax-table thead {
   border-bottom-width: 1px;
   border-color: rgba(var(--ax-sys-border-color));
-  background-color: rgba(var(--ax-color-on-surface));
+  background-color: rgba(var(--ax-sys-surface-high-bg-color));
 }
 .ax-table thead th {
   padding-left: 1rem;
@@ -987,7 +987,7 @@ body {
   text-transform: uppercase;
 }
 .ax-table.ax-table-alternate tbody tr:nth-child(even) {
-  background-color: rgba(var(--ax-color-on-surface));
+  background-color: rgba(var(--ax-sys-surface-high-bg-color));
 }
 .ax-table.ax-table-bordered thead th {
   border-top-width: 0px !important;
@@ -1108,7 +1108,7 @@ body {
   background-color: rgba(var(--ax-sys-color-primary-200), 0.75);
   font-size: 0.875rem;
   line-height: 1.25rem;
-  color: rgba(var(--ax-sys-color-primary-text-tint));
+  color: rgba(var(--ax-sys-color-on-primary-tint));
   outline-style: dashed;
   outline-offset: -4px;
   transition-property: all;
@@ -1123,8 +1123,8 @@ body {
 
 .ax-dark .ax-uploader-overlay-state {
   background-color: rgba(var(--ax-sys-color-primary-800), 0.75);
-  color: rgba(var(--ax-sys-color-primary-text));
-  outline-color: rgba(var(--ax-sys-color-primary-text));
+  color: rgba(var(--ax-sys-color-on-primary));
+  outline-color: rgba(var(--ax-sys-color-on-primary));
 }
 
 .ax-ripple {

package/index.min.css

@@ -1 +1 @@
-@import'@angular/cdk/overlay-prebuilt.css';*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:theme("borderColor.DEFAULT", currentColor)}::before,::after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:theme("fontFamily.sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:theme("fontFamily.sans[1].fontFeatureSettings", normal);font-variation-settings:theme("fontFamily.sans[1].fontVariationSettings", normal);-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:theme("fontFamily.mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:theme("fontFamily.mono[1].fontFeatureSettings", normal);font-variation-settings:theme("fontFamily.mono[1].fontVariationSettings", normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:rgba(0,0,0,0);background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:theme("colors.gray.400", #9ca3af)}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--ax-overlay-full-width: 93}html,body{background-color:rgba(var(--ax-sys-body-bg-color));color:rgba(var(--ax-sys-body-text-color))}.ax-editor-container{--ax-comp-editor-border-width: 1px;--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-height: calc(var(--ax-sys-size-base) * var(--ax-comp-editor-size-ratio));--ax-comp-editor-font-family: inherit;--ax-comp-editor-font-weight: normal;--ax-comp-editor-focus-color: var(--ax-sys-color-primary-500);--ax-comp-editor-padding-y: 0;--ax-comp-editor-button-text-color: var(--ax-sys-surface-input-text-color)}.ax-xs .ax-editor-container,.ax-editor-container.ax-xs{--ax-comp-editor-size-ratio: 0.75;--ax-comp-editor-font-size: 0.675rem;--ax-comp-editor-padding-x: 0.188rem;--ax-comp-editor-decorator-padding-x: 0.125rem}.ax-sm .ax-editor-container,.ax-editor-container.ax-sm{--ax-comp-editor-size-ratio: 0.875;--ax-comp-editor-font-size: 0.75rem;--ax-comp-editor-padding-x: 0.375rem;--ax-comp-editor-decorator-padding-x: 0.25rem}.ax-md .ax-editor-container,.ax-editor-container{--ax-comp-editor-size-ratio: 1;--ax-comp-editor-font-size: 0.875rem;--ax-comp-editor-padding-x: 0.75rem;--ax-comp-editor-decorator-padding-x: 0.5rem}.ax-lg .ax-editor-container,.ax-editor-container.ax-lg{--ax-comp-editor-size-ratio: 1.125;--ax-comp-editor-font-size: 1rem;--ax-comp-editor-padding-x: 0.875rem;--ax-comp-editor-decorator-padding-x: 0.75rem}.ax-xl .ax-editor-container,.ax-editor-container.ax-xl{--ax-comp-editor-size-ratio: 1.5;--ax-comp-editor-font-size: 1.5rem;--ax-comp-editor-padding-x: 1rem;--ax-comp-editor-decorator-padding-x: 0.875rem}.ax-editor-container.ax-solid{--ax-comp-editor-bg-color: var(--ax-sys-surface-input-bg-color);--ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);--ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);--ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-button-bg-hover-color: var(--ax-sys-surface-high-bg-color);--ax-comp-editor-border-width: 1px;--ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color));border-width:var(--ax-comp-editor-border-width);box-shadow:var(--ax-comp-editor-box-shadow)}.ax-editor-container.ax-solid:focus,.ax-editor-container.ax-solid:focus-within,.ax-editor-container.ax-solid:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);box-shadow:0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-fill{--ax-comp-editor-bg-color: var(--ax-sys-surface-low-bg-color);--ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);--ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);--ax-comp-editor-border-color: transparent;--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 0px}.ax-editor-container.ax-fill:focus,.ax-editor-container.ax-fill:focus-within,.ax-editor-container.ax-fill:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);box-shadow:0px 0px 0 2px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-outline{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);--ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);--ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 1px;border-width:var(--ax-comp-editor-border-width)}.ax-editor-container.ax-outline:focus,.ax-editor-container.ax-outline:focus-within,.ax-editor-container.ax-outline:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);box-shadow:0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-flat{--ax-comp-editor-bg-color: 0, 0, 0, 0;--ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);--ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);--ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);--ax-comp-editor-border-radius: 0px;--ax-comp-editor-border-width: 1px;border-bottom-width:var(--ax-comp-editor-border-width)}.ax-editor-container.ax-flat:focus,.ax-editor-container.ax-flat:focus-within,.ax-editor-container.ax-flat:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);box-shadow:0px 1px 0 0px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container{background-color:rgba(var(--ax-comp-editor-bg-color));color:rgba(var(--ax-comp-editor-text-color));border-color:rgba(var(--ax-comp-editor-border-color));border-radius:var(--ax-comp-editor-border-radius);border-style:solid;display:inline-flex;align-items:center;height:var(--ax-comp-editor-height);width:100%;overflow:hidden}.ax-editor-container ax-prefix{max-width:fit-content;font-size:var(--ax-comp-editor-font-size);padding:var(--ax-comp-editor-decorator-padding-y, 0) var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-clear-button{margin-inline-end:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-suffix{margin-inline-start:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container .ax-input{width:100%;height:100%;font-size:var(--ax-comp-editor-font-size);padding:0px;outline-width:0px;padding:0 var(--ax-comp-editor-padding-x);background-color:rgba(0,0,0,0)}.ax-editor-container .ax-input:focus,.ax-editor-container .ax-input:focus-visible,.ax-editor-container .ax-input:focus-within{outline:none}.ax-editor-container .ax-input::placeholder{color:rgba(var(--ax-comp-editor-placeholder-color));font-size:calc(var(--ax-comp-editor-font-size))}.ax-editor-container .ax-editor-button{height:var(--ax-comp-editor-button-height, 100%);padding:var(--ax-comp-editor-decorator-button-y, 0) var(--ax-comp-editor-decorator-button-x, 0.75rem);font-size:var(--ax-comp-editor-button-font-size, 100%);color:rgba(var(--ax-comp-editor-button-text-color), var(--ax-comp-editor-button-text-color-opacity, 0.6));display:flex;align-items:center;justify-content:center}.ax-action-list.ax-action-list-horizontal{display:flex;flex-direction:row}.ax-action-list.ax-action-list-horizontal ax-divider{margin-inline:.25rem;width:1px;height:auto}.ax-action-list.ax-action-list-vertical{display:flex;flex-direction:column}.ax-action-list.ax-action-list-vertical .ax-action-item>div.ax-action-item-prefix ax-prefix{min-width:1rem}.ax-action-list.ax-action-list-vertical ax-divider{margin-block:.25rem;height:1px;width:100%}.ax-action-list ax-title{display:block;padding-inline:.875rem;padding-block:.25rem;font-size:.75rem;line-height:1rem;font-weight:bolder;text-transform:uppercase;opacity:.5}.ax-action-list ax-divider{display:block;background-color:rgba(var(--ax-sys-border-color))}.ax-action-list .ax-action-item{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;line-height:1.25rem;height:2.25rem;width:100%;cursor:pointer;padding-inline-end:1rem}.ax-action-list .ax-action-item.ax-state-disabled{cursor:not-allowed;opacity:.5}.ax-action-list .ax-action-item:hover:not(.ax-action-list .ax-action-item:hover.ax-state-disabled,.ax-action-list .ax-action-item:hover.ax-state-selected) ax-prefix,.ax-action-list .ax-action-item:hover:not(.ax-action-list .ax-action-item:hover.ax-state-disabled,.ax-action-list .ax-action-item:hover.ax-state-selected) ax-suffix{opacity:1}.ax-action-list .ax-action-item>div{display:flex;align-items:center;justify-content:center}.ax-action-list .ax-action-item>div.ax-action-item-prefix{padding-inline-start:.875rem}.ax-action-list .ax-action-item>div.ax-action-item-prefix>ax-text{padding-inline-start:.5rem;white-space:nowrap}.ax-action-list .ax-action-item>div.ax-action-item-suffix:not(.ax-action-list .ax-action-item>div.ax-action-item-suffix:empty){padding-inline-end:.875rem;margin-inline-start:1rem}.ax-action-list .ax-action-item ax-prefix{display:flex;gap:.5rem}.ax-action-list .ax-action-item ax-suffix ax-text{color:rgba(var(--ax-sys-body-text-color));opacity:.5;font-weight:lighter;padding-inline:.5rem}.ax-action-sheet-panel{--ax-comp-action-sheet-border-radius-size: var(--ax-sys-border-radius);overflow:hidden;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-surface-bg-color));--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);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);animation:1s both ax-fadeInUp;animation-duration:var(--ax-sys-transition-duration)}@keyframes ax-fadeInUp{from{transform:translate3d(0, 100%, 0);opacity:0}}.ax-checkbox{margin:0px;height:1rem;min-width:1rem;cursor:pointer;appearance:none;border-radius:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-surface-input-border-color));background-color:rgba(var(--ax-sys-surface-input-bg-color));vertical-align:middle;outline:2px solid rgba(0,0,0,0);outline-offset:2px}.ax-checkbox:checked,.ax-checkbox:indeterminate{border-color:rgba(var(--ax-sys-color-primary-500)) !important;background-color:rgba(var(--ax-sys-color-primary-500)) !important;background-size:contain;background-repeat:no-repeat}.ax-checkbox:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}.ax-checkbox:indeterminate{background-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==")}.ax-checkbox:focus-visible,.ax-checkbox:focus{box-shadow:0px 0px 0px 2px rgba(var(--ax-sys-surface-bg-color)),0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500))}.ax-checkbox:disabled{cursor:not-allowed;opacity:.5}.ax-drop-down{display:contents}.ax-drop-down .ax-dropdown-content{display:flex;flex:1 1 0%;align-items:center;overflow-x:auto;overflow-y:hidden;font-size:.875rem;line-height:1.25rem;text-transform:capitalize}.ax-drop-down .ax-dropdown-content.ax-state-disabled{cursor:not-allowed;opacity:.5}.ax-overlay-pane{margin:.25rem 0;min-width:10rem;height:fit-content;overflow:hidden;border-width:1px;border-color:rgba(var(--ax-sys-border-color));background-color:rgba(var(--ax-sys-surface-lowest-bg-color));--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 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);border-radius:var(--ax-sys-border-radius)}@media(min-width: 320px)and (max-width: 640px){.ax-overlay-pane{margin:0}}.ax-overlay-pane ax-header,.ax-overlay-pane ax-footer{background-color:rgba(var(--ax-sys-surface-bg-color));padding:.75rem}.ax-overlay-pane.ax-overlay-center{height:fit-content;width:80vw;max-width:90vh}.ax-overlay-pane.ax-overlay-actionsheet{height:auto;max-height:85vh;width:100%;background-color:rgba(var(--ax-sys-surface-bg-color));border-top-left-radius:var(--ax-sys-border-radius);border-top-right-radius:var(--ax-sys-border-radius)}.ax-overlay-pane.ax-overlay-actionsheet.ax-full{height:95vh;max-height:95vh}.ax-overlay-pane.ax-overlay-full{width:100vw;height:100vh}.ax-general-button{display:inline-flex;height:var(--ax-sys-size-base);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);padding-left:1rem;padding-right:1rem;font-size:.875rem;line-height:1.25rem;color:rgb(var(--ax-sys-surface-input-text-color), 0.75)}.ax-general-button:hover:not(.ax-general-button:hover:disabled,.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-500), var(--tw-text-opacity))}.ax-general-button:focus:not(.ax-general-button:focus:disabled,.ax-state-disabled,.ax-general-button:focus-visible:disabled),.ax-general-button:focus-visible:not(.ax-general-button:focus:disabled,.ax-state-disabled,.ax-general-button:focus-visible:disabled){color:rgba(var(--ax-sys-color-primary-700), var(--tw-text-opacity))}.ax-general-button:active:not(.ax-general-button:active:disabled,.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-300), var(--tw-text-opacity))}.ax-general-button.ax-button-icon{padding-left:.5rem;padding-right:.5rem;font-size:100%}.ax-general-button.ax-button-icon>button{display:flex}.ax-general-button.ax-button-rounded{border-radius:var(--ax-sys-border-radius)}.ax-general-button:disabled,.ax-general-button.ax-state-disabled{cursor:not-allowed;opacity:.5}.ax-clear-button{display:inline-flex;height:var(--ax-sys-size-base);align-items:center;justify-content:center;margin-left:.25rem;margin-right:.25rem;font-size:1rem;line-height:1.5rem;color:rgb(var(--ax-sys-body-text-color), 0.75)}.ax-clear-button>button{display:flex}.ax-clear-button:hover:not(.ax-clear-button:hover:disabled,.ax-state-disabled){color:rgb(var(--ax-sys-body-text-color), 0.5)}.ax-clear-button:focus:not(.ax-clear-button:focus:disabled,.ax-state-disabled,.ax-clear-button:focus-visible:disabled),.ax-clear-button:focus-visible:not(.ax-clear-button:focus:disabled,.ax-state-disabled,.ax-clear-button:focus-visible:disabled){color:rgb(var(--ax-sys-body-text-color))}.ax-dark .ax-list-item.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-800)) !important;color:rgba(var(--ax-sys-color-primary-text)) !important}.ax-list{display:flex;height:100%;flex-direction:column;overflow:hidden;background-color:rgba(var(--ax-sys-surface-bg-color));font-size:.875rem;line-height:1.25rem}@media(min-width: 768px){.ax-list{max-height:20rem}}.ax-list ax-header,.ax-list ax-footer{display:flex;align-items:center;justify-content:space-between;border-color:rgba(var(--ax-sys-border-color), var(--tw-border-opacity));background-color:rgba(var(--ax-color-surface), var(--tw-bg-opacity))}.ax-list ax-header{border-bottom-width:1px;border-color:rgba(var(--ax-sys-border-color), var(--tw-border-opacity));padding:1rem;font-size:1rem;line-height:1.5rem;font-weight:500}@media(min-width: 768px){.ax-list ax-header{font-size:1.125rem;line-height:1.75rem}}.ax-list ax-header ax-prefix,.ax-list ax-header ax-suffix{display:flex;flex-direction:column;justify-items:start}.ax-list ax-header ax-prefix{align-items:flex-start}.ax-list ax-header ax-suffix{align-items:flex-end}.ax-list ax-footer{border-top-width:1px}.ax-list .ax-content{flex:1 1 0%;overflow-y:auto;overflow-x:hidden}.ax-list .ax-content.ax-list-items-container{height:100%;overflow-y:auto;padding-top:.5rem;padding-bottom:.5rem}.ax-list .ax-content.ax-list-items-container.ax-vertical{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))}.ax-list .ax-content.ax-list-items-container.ax-vertical.ax-divide{border-top-width:1px;border-bottom-width:1px}.ax-list .ax-content.ax-list-items-container.ax-default{cursor:pointer}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group>span{display:flex;align-items:center;padding:.75rem;font-weight:500}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group>ul{padding-left:.75rem;padding-right:.75rem}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group .ax-list-item{margin-bottom:.25rem;border-radius:var(--ax-sys-border-radius)}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item{position:relative;display:flex;height:var(--ax-sys-size-base);user-select:none;align-items:center;justify-content:space-between;padding-inline-end:1rem;padding-inline-start:.75rem;font-size:1rem;line-height:1.5rem}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus,.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus-visible{outline-width:2px;outline-offset:2px}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-checkbox .ax-checkbox-label{margin-inline-start:.5rem}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-500), var(--tw-bg-opacity)) !important;color:rgba(var(--ax-sys-color-primary-text), var(--tw-text-opacity)) !important}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-disabled{cursor:not-allowed;opacity:.5}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus-visible,.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:hover{background-color:rgba(var(--ax-color-on-surface))}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-focus{background-color:rgba(var(--ax-color-on-surface))}.ax-list .ax-content.ax-list-items-container .ax-list-loading-container{display:flex;justify-content:center;padding:.5rem}.ax-list .ax-search-box-container{padding:.5rem}.ax-list .ax-search-box-container.ax-state-hidden{display:none}.ax-radio{margin:0px;height:1rem;min-height:1rem;min-width:1rem;width:1rem;cursor:pointer;appearance:none;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-sys-surface-input-border-color));background-color:rgba(var(--ax-sys-surface-input-bg-color));vertical-align:middle;outline:2px solid rgba(0,0,0,0);outline-offset:2px}.ax-radio:checked{border-color:rgba(var(--ax-sys-color-primary-500)) !important;background-color:rgba(var(--ax-sys-color-primary-500)) !important;background-size:contain;background-repeat:no-repeat}.ax-radio:checked{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")}.ax-radio:focus-visible,.ax-radio:focus{box-shadow:0px 0px 0px 2px rgba(var(--ax-sys-surface-bg-color)),0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500))}.ax-radio:disabled{cursor:not-allowed;opacity:.5}.ax-dark .ax-table thead{background-color:rgba(var(--ax-color-on-surface))}.ax-table{width:100%;border-collapse:collapse;border-spacing:0;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-border-color));font-size:.875rem;line-height:1.25rem}.ax-table td{border-bottom-width:1px;border-color:rgba(var(--ax-sys-border-color));padding-left:1rem;padding-right:1rem;padding-top:.75rem;padding-bottom:.75rem}.ax-table thead{border-bottom-width:1px;border-color:rgba(var(--ax-sys-border-color));background-color:rgba(var(--ax-color-on-surface))}.ax-table thead th{padding-left:1rem;padding-right:1rem;padding-top:.875rem;padding-bottom:.875rem;text-align:start;font-weight:500;text-transform:uppercase}.ax-table.ax-table-alternate tbody tr:nth-child(even){background-color:rgba(var(--ax-color-on-surface))}.ax-table.ax-table-bordered thead th{border-top-width:0px !important}.ax-table.ax-table-bordered tbody tr:last-child td{border-bottom-width:0px !important}.ax-table.ax-table-bordered tbody tr td:last-child{border-bottom-width:0px !important}.ax-table.ax-table-bordered td,.ax-table.ax-table-bordered th{border-width:1px;border-color:rgba(var(--ax-sys-border-color))}.ax-table.ax-table-bordered td:first-child,.ax-table.ax-table-bordered th:first-child{border-inline-start-width:0px}.ax-table.ax-table-bordered td:last-child,.ax-table.ax-table-bordered th:last-child{border-inline-end-width:0px}@media screen and (max-width: 640px){.ax-table.ax-table-responsive{display:block;overflow-wrap:break-word;border-width:0px}.ax-table.ax-table-responsive thead{position:absolute;inset-inline-start:-100%;top:-100%}.ax-table.ax-table-responsive td{float:inline-start;clear:both;box-sizing:border-box;display:block;width:100%;padding-left:.625rem;padding-right:.625rem;padding-top:.375rem;padding-bottom:.375rem}.ax-table.ax-table-responsive td:last-child{border-width:0px}.ax-table.ax-table-responsive td:before{content:attr(data-label);display:block;font-weight:700}.ax-table.ax-table-responsive tr{border-width:1px;border-color:rgba(var(--ax-sys-border-color))}.ax-table.ax-table-responsive tr,.ax-table.ax-table-responsive tbody{float:inline-start;margin-bottom:.625rem;width:100%}}[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-surface-input-border-color));padding:.75rem}.ax-fieldset legend{padding-left:.25rem;padding-right:.25rem;font-size:.875rem;line-height:1.25rem}.ax-card{border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-surface-input-border-color));background-color:rgba(var(--ax-sys-surface-bg-color))}.ax-drop-zone>input{position:absolute;height:100%;width:100%;cursor:pointer;opacity:0}.ax-uploader-overlay-state{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:.5rem;background-color:rgba(var(--ax-sys-color-primary-200), 0.75);font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-primary-text-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}.ax-dark .ax-uploader-overlay-state{background-color:rgba(var(--ax-sys-color-primary-800), 0.75);color:rgba(var(--ax-sys-color-primary-text));outline-color:rgba(var(--ax-sys-color-primary-text))}.ax-ripple{transform:scale(0);animation:ripple 500ms linear;position:absolute;border-radius:9999rem !important}@keyframes ripple{to{transform:scale(4);opacity:0}}.ax-placeholder{color:rgba(var(--ax-sys-surface-input-placeholder-color));font-size:calc(var(--ax-comp-editor-font-size)*.875)}
+@import'@angular/cdk/overlay-prebuilt.css';*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:theme("borderColor.DEFAULT", currentColor)}::before,::after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:theme("fontFamily.sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:theme("fontFamily.sans[1].fontFeatureSettings", normal);font-variation-settings:theme("fontFamily.sans[1].fontVariationSettings", normal);-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:theme("fontFamily.mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:theme("fontFamily.mono[1].fontFeatureSettings", normal);font-variation-settings:theme("fontFamily.mono[1].fontVariationSettings", normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:rgba(0,0,0,0);background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:theme("colors.gray.400", #9ca3af)}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--ax-overlay-full-width: 93}html,body{background-color:rgba(var(--ax-sys-body-bg-color));color:rgba(var(--ax-sys-body-text-color))}.ax-editor-container{--ax-comp-editor-border-width: 1px;--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-height: calc(var(--ax-sys-size-base) * var(--ax-comp-editor-size-ratio));--ax-comp-editor-font-family: inherit;--ax-comp-editor-font-weight: normal;--ax-comp-editor-focus-color: var(--ax-sys-color-primary-500);--ax-comp-editor-padding-y: 0;--ax-comp-editor-button-text-color: var(--ax-sys-surface-input-text-color)}.ax-xs .ax-editor-container,.ax-editor-container.ax-xs{--ax-comp-editor-size-ratio: 0.75;--ax-comp-editor-font-size: 0.675rem;--ax-comp-editor-padding-x: 0.188rem;--ax-comp-editor-decorator-padding-x: 0.125rem}.ax-sm .ax-editor-container,.ax-editor-container.ax-sm{--ax-comp-editor-size-ratio: 0.875;--ax-comp-editor-font-size: 0.75rem;--ax-comp-editor-padding-x: 0.375rem;--ax-comp-editor-decorator-padding-x: 0.25rem}.ax-md .ax-editor-container,.ax-editor-container{--ax-comp-editor-size-ratio: 1;--ax-comp-editor-font-size: 0.875rem;--ax-comp-editor-padding-x: 0.75rem;--ax-comp-editor-decorator-padding-x: 0.5rem}.ax-lg .ax-editor-container,.ax-editor-container.ax-lg{--ax-comp-editor-size-ratio: 1.125;--ax-comp-editor-font-size: 1rem;--ax-comp-editor-padding-x: 0.875rem;--ax-comp-editor-decorator-padding-x: 0.75rem}.ax-xl .ax-editor-container,.ax-editor-container.ax-xl{--ax-comp-editor-size-ratio: 1.5;--ax-comp-editor-font-size: 1.5rem;--ax-comp-editor-padding-x: 1rem;--ax-comp-editor-decorator-padding-x: 0.875rem}.ax-editor-container.ax-solid{--ax-comp-editor-bg-color: var(--ax-sys-surface-input-bg-color);--ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);--ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);--ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-button-bg-hover-color: var(--ax-sys-surface-high-bg-color);--ax-comp-editor-border-width: 1px;--ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color));border-width:var(--ax-comp-editor-border-width)}.ax-editor-container.ax-solid:focus,.ax-editor-container.ax-solid:focus-within,.ax-editor-container.ax-solid:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);box-shadow:0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-fill{--ax-comp-editor-bg-color: var(--ax-sys-surface-bg-color);--ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);--ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);--ax-comp-editor-border-color: transparent;--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 0px}.ax-editor-container.ax-fill:focus,.ax-editor-container.ax-fill:focus-within,.ax-editor-container.ax-fill:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);box-shadow:0px 0px 0 2px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-outline{--ax-comp-editor-bg-color: transparent;--ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);--ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);--ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-border-width: 1px;border-width:var(--ax-comp-editor-border-width)}.ax-editor-container.ax-outline:focus,.ax-editor-container.ax-outline:focus-within,.ax-editor-container.ax-outline:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);box-shadow:0px 0px 0 1px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container.ax-flat{--ax-comp-editor-bg-color: 0, 0, 0, 0;--ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);--ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);--ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);--ax-comp-editor-border-radius: 0px;--ax-comp-editor-border-width: 1px;border-bottom-width:var(--ax-comp-editor-border-width)}.ax-editor-container.ax-flat:focus,.ax-editor-container.ax-flat:focus-within,.ax-editor-container.ax-flat:focus-visible{--ax-comp-editor-border-color: var(--ax-sys-color-primary-500);box-shadow:0px 1px 0 0px rgba(var(--ax-sys-color-primary-500))}.ax-editor-container{background-color:rgba(var(--ax-comp-editor-bg-color));color:rgba(var(--ax-comp-editor-text-color));border-color:rgba(var(--ax-comp-editor-border-color));border-radius:var(--ax-comp-editor-border-radius);border-style:solid;display:inline-flex;align-items:center;height:var(--ax-comp-editor-height);width:100%;overflow:hidden;position:relative}.ax-editor-container ax-prefix{max-width:fit-content;font-size:var(--ax-comp-editor-font-size);padding:var(--ax-comp-editor-decorator-padding-y, 0) var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-clear-button{margin-inline-end:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container ax-suffix{margin-inline-start:var(--ax-comp-editor-decorator-padding-x)}.ax-editor-container .ax-input{width:100%;height:100%;font-size:var(--ax-comp-editor-font-size);padding:0px;outline-width:0px;padding:0 var(--ax-comp-editor-padding-x);background-color:rgba(0,0,0,0)}.ax-editor-container .ax-input:focus,.ax-editor-container .ax-input:focus-visible,.ax-editor-container .ax-input:focus-within{outline:none}.ax-editor-container .ax-input::placeholder{color:rgba(var(--ax-comp-editor-placeholder-color));font-size:calc(var(--ax-comp-editor-font-size))}.ax-editor-container .ax-editor-button{height:var(--ax-comp-editor-button-height, 100%);padding:var(--ax-comp-editor-decorator-button-y, 0) var(--ax-comp-editor-decorator-button-x, 0.75rem);font-size:var(--ax-comp-editor-button-font-size, 100%);color:rgba(var(--ax-comp-editor-button-text-color), var(--ax-comp-editor-button-text-color-opacity, 0.6));display:flex;align-items:center;justify-content:center}.ax-action-list.ax-action-list-horizontal{display:flex;flex-direction:row}.ax-action-list.ax-action-list-horizontal ax-divider{margin-inline:.25rem;width:1px;height:auto}.ax-action-list.ax-action-list-vertical{display:flex;flex-direction:column}.ax-action-list.ax-action-list-vertical .ax-action-item>div.ax-action-item-prefix ax-prefix{min-width:1rem}.ax-action-list.ax-action-list-vertical ax-divider{margin-block:.25rem;height:1px;width:100%}.ax-action-list ax-title{display:block;padding-inline:.875rem;padding-block:.25rem;font-size:.75rem;line-height:1rem;font-weight:bolder;text-transform:uppercase;opacity:.5}.ax-action-list ax-divider{display:block;background-color:rgba(var(--ax-sys-border-color))}.ax-action-list .ax-action-item{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;line-height:1.25rem;height:2.25rem;width:100%;cursor:pointer;padding-inline-end:1rem}.ax-action-list .ax-action-item.ax-state-disabled{cursor:not-allowed;opacity:.5}.ax-action-list .ax-action-item:hover:not(.ax-action-list .ax-action-item:hover.ax-state-disabled,.ax-action-list .ax-action-item:hover.ax-state-selected) ax-prefix,.ax-action-list .ax-action-item:hover:not(.ax-action-list .ax-action-item:hover.ax-state-disabled,.ax-action-list .ax-action-item:hover.ax-state-selected) ax-suffix{opacity:1}.ax-action-list .ax-action-item>div{display:flex;align-items:center;justify-content:center}.ax-action-list .ax-action-item>div.ax-action-item-prefix{padding-inline-start:.875rem}.ax-action-list .ax-action-item>div.ax-action-item-prefix>ax-text{padding-inline-start:.5rem;white-space:nowrap}.ax-action-list .ax-action-item>div.ax-action-item-suffix:not(.ax-action-list .ax-action-item>div.ax-action-item-suffix:empty){padding-inline-end:.875rem;margin-inline-start:1rem}.ax-action-list .ax-action-item ax-prefix{display:flex;gap:.5rem}.ax-action-list .ax-action-item ax-suffix ax-text{color:rgba(var(--ax-sys-body-text-color));opacity:.5;font-weight:lighter;padding-inline:.5rem}.ax-action-sheet-panel{--ax-comp-action-sheet-border-radius-size: var(--ax-sys-border-radius);overflow:hidden;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-surface-lowest-bg-color));--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);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);animation:1s both ax-fadeInUp;animation-duration:var(--ax-sys-transition-duration)}@keyframes ax-fadeInUp{from{transform:translate3d(0, 100%, 0);opacity:0}}.ax-checkbox{margin:0px;height:1rem;min-width:1rem;cursor:pointer;appearance:none;border-radius:.25rem;border-width:1px;border-color:rgba(var(--ax-sys-surface-input-border-color));background-color:rgba(var(--ax-sys-surface-input-bg-color));vertical-align:middle;outline:2px solid rgba(0,0,0,0);outline-offset:2px}.ax-checkbox:checked,.ax-checkbox:indeterminate{border-color:rgba(var(--ax-sys-color-primary-500)) !important;background-color:rgba(var(--ax-sys-color-primary-500)) !important;background-size:contain;background-repeat:no-repeat}.ax-checkbox:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}.ax-checkbox:indeterminate{background-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==")}.ax-checkbox:focus-visible,.ax-checkbox:focus{box-shadow:0px 0px 0px 2px rgba(var(--ax-sys-surface-bg-color)),0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500))}.ax-checkbox:disabled{cursor:not-allowed;opacity:.5}.ax-drop-down{display:contents}.ax-drop-down .ax-dropdown-content{display:flex;flex:1 1 0%;align-items:center;overflow-x:auto;overflow-y:hidden;font-size:.875rem;line-height:1.25rem;text-transform:capitalize}.ax-drop-down .ax-dropdown-content.ax-state-disabled{cursor:not-allowed;opacity:.5}.ax-overlay-pane{margin:.25rem 0;min-width:10rem;height:fit-content;overflow:hidden;border-width:1px;border-color:rgba(var(--ax-sys-border-color));background-color:rgba(var(--ax-sys-surface-lowest-bg-color));--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 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);border-radius:var(--ax-sys-border-radius)}@media(min-width: 320px)and (max-width: 640px){.ax-overlay-pane{margin:0}}.ax-overlay-pane ax-header,.ax-overlay-pane ax-footer{background-color:rgba(var(--ax-sys-surface-bg-color));padding:.75rem}.ax-overlay-pane.ax-overlay-center{height:fit-content;width:80vw;max-width:90vh}.ax-overlay-pane.ax-overlay-actionsheet{height:auto;max-height:85vh;width:100%;background-color:rgba(var(--ax-sys-surface-bg-color));border-top-left-radius:var(--ax-sys-border-radius);border-top-right-radius:var(--ax-sys-border-radius)}.ax-overlay-pane.ax-overlay-actionsheet.ax-full{height:95vh;max-height:95vh}.ax-overlay-pane.ax-overlay-full{width:100vw;height:100vh}.ax-general-button{display:inline-flex;height:var(--ax-sys-size-base);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);padding-left:1rem;padding-right:1rem;font-size:.875rem;line-height:1.25rem;color:rgb(var(--ax-sys-surface-input-text-color), 0.75)}.ax-general-button:hover:not(.ax-general-button:hover:disabled,.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-500), var(--tw-text-opacity))}.ax-general-button:focus:not(.ax-general-button:focus:disabled,.ax-state-disabled,.ax-general-button:focus-visible:disabled),.ax-general-button:focus-visible:not(.ax-general-button:focus:disabled,.ax-state-disabled,.ax-general-button:focus-visible:disabled){color:rgba(var(--ax-sys-color-primary-700), var(--tw-text-opacity))}.ax-general-button:active:not(.ax-general-button:active:disabled,.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-300), var(--tw-text-opacity))}.ax-general-button.ax-button-icon{padding-left:.5rem;padding-right:.5rem;font-size:100%}.ax-general-button.ax-button-icon>button{display:flex}.ax-general-button.ax-button-rounded{border-radius:var(--ax-sys-border-radius)}.ax-general-button:disabled,.ax-general-button.ax-state-disabled{cursor:not-allowed;opacity:.5}.ax-clear-button{display:inline-flex;height:var(--ax-sys-size-base);align-items:center;justify-content:center;margin-left:.25rem;margin-right:.25rem;font-size:1rem;line-height:1.5rem;color:rgb(var(--ax-sys-body-text-color), 0.75)}.ax-clear-button>button{display:flex}.ax-clear-button:hover:not(.ax-clear-button:hover:disabled,.ax-state-disabled){color:rgb(var(--ax-sys-body-text-color), 0.5)}.ax-clear-button:focus:not(.ax-clear-button:focus:disabled,.ax-state-disabled,.ax-clear-button:focus-visible:disabled),.ax-clear-button:focus-visible:not(.ax-clear-button:focus:disabled,.ax-state-disabled,.ax-clear-button:focus-visible:disabled){color:rgb(var(--ax-sys-body-text-color))}.ax-dark .ax-list-item.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-800)) !important;color:rgba(var(--ax-sys-color-on-primary)) !important}.ax-list{display:flex;height:100%;flex-direction:column;overflow:hidden;background-color:rgba(var(--ax-sys-surface-bg-color));font-size:.875rem;line-height:1.25rem}@media(min-width: 768px){.ax-list{max-height:20rem}}.ax-list ax-header,.ax-list ax-footer{display:flex;align-items:center;justify-content:space-between;border-color:rgba(var(--ax-sys-border-color), var(--tw-border-opacity));background-color:rgba(var(--ax-color-surface), var(--tw-bg-opacity))}.ax-list ax-header{border-bottom-width:1px;border-color:rgba(var(--ax-sys-border-color), var(--tw-border-opacity));padding:1rem;font-size:1rem;line-height:1.5rem;font-weight:500}@media(min-width: 768px){.ax-list ax-header{font-size:1.125rem;line-height:1.75rem}}.ax-list ax-header ax-prefix,.ax-list ax-header ax-suffix{display:flex;flex-direction:column;justify-items:start}.ax-list ax-header ax-prefix{align-items:flex-start}.ax-list ax-header ax-suffix{align-items:flex-end}.ax-list ax-footer{border-top-width:1px}.ax-list .ax-content{flex:1 1 0%;overflow-y:auto;overflow-x:hidden}.ax-list .ax-content.ax-list-items-container{height:100%;overflow-y:auto;padding-top:.5rem;padding-bottom:.5rem}.ax-list .ax-content.ax-list-items-container.ax-vertical{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))}.ax-list .ax-content.ax-list-items-container.ax-vertical.ax-divide{border-top-width:1px;border-bottom-width:1px}.ax-list .ax-content.ax-list-items-container.ax-default{cursor:pointer}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group>span{display:flex;align-items:center;padding:.75rem;font-weight:500}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group>ul{padding-left:.75rem;padding-right:.75rem}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group .ax-list-item{margin-bottom:.25rem;border-radius:var(--ax-sys-border-radius)}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item{position:relative;display:flex;height:var(--ax-sys-size-base);user-select:none;align-items:center;justify-content:space-between;padding-inline-end:1rem;padding-inline-start:.75rem;font-size:1rem;line-height:1.5rem}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus,.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus-visible{outline-width:2px;outline-offset:2px}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-checkbox .ax-checkbox-label{margin-inline-start:.5rem}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-500), var(--tw-bg-opacity)) !important;color:rgba(var(--ax-sys-color-on-primary), var(--tw-text-opacity)) !important}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-disabled{cursor:not-allowed;opacity:.5}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus-visible,.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:hover{background-color:rgba(var(--ax-sys-surface-high-bg-color))}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-focus{background-color:rgba(var(--ax-sys-surface-high-bg-color))}.ax-list .ax-content.ax-list-items-container .ax-list-loading-container{display:flex;justify-content:center;padding:.5rem}.ax-list .ax-search-box-container{padding:.5rem}.ax-list .ax-search-box-container.ax-state-hidden{display:none}.ax-radio{margin:0px;height:1rem;min-height:1rem;min-width:1rem;width:1rem;cursor:pointer;appearance:none;border-radius:9999px;border-width:1px;border-color:rgba(var(--ax-sys-surface-input-border-color));background-color:rgba(var(--ax-sys-surface-input-bg-color));vertical-align:middle;outline:2px solid rgba(0,0,0,0);outline-offset:2px}.ax-radio:checked{border-color:rgba(var(--ax-sys-color-primary-500)) !important;background-color:rgba(var(--ax-sys-color-primary-500)) !important;background-size:contain;background-repeat:no-repeat}.ax-radio:checked{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")}.ax-radio:focus-visible,.ax-radio:focus{box-shadow:0px 0px 0px 2px rgba(var(--ax-sys-surface-bg-color)),0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500))}.ax-radio:disabled{cursor:not-allowed;opacity:.5}.ax-dark .ax-table thead{background-color:rgba(var(--ax-sys-surface-high-bg-color))}.ax-table{width:100%;border-collapse:collapse;border-spacing:0;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-border-color));font-size:.875rem;line-height:1.25rem}.ax-table td{border-bottom-width:1px;border-color:rgba(var(--ax-sys-border-color));padding-left:1rem;padding-right:1rem;padding-top:.75rem;padding-bottom:.75rem}.ax-table thead{border-bottom-width:1px;border-color:rgba(var(--ax-sys-border-color));background-color:rgba(var(--ax-sys-surface-high-bg-color))}.ax-table thead th{padding-left:1rem;padding-right:1rem;padding-top:.875rem;padding-bottom:.875rem;text-align:start;font-weight:500;text-transform:uppercase}.ax-table.ax-table-alternate tbody tr:nth-child(even){background-color:rgba(var(--ax-sys-surface-high-bg-color))}.ax-table.ax-table-bordered thead th{border-top-width:0px !important}.ax-table.ax-table-bordered tbody tr:last-child td{border-bottom-width:0px !important}.ax-table.ax-table-bordered tbody tr td:last-child{border-bottom-width:0px !important}.ax-table.ax-table-bordered td,.ax-table.ax-table-bordered th{border-width:1px;border-color:rgba(var(--ax-sys-border-color))}.ax-table.ax-table-bordered td:first-child,.ax-table.ax-table-bordered th:first-child{border-inline-start-width:0px}.ax-table.ax-table-bordered td:last-child,.ax-table.ax-table-bordered th:last-child{border-inline-end-width:0px}@media screen and (max-width: 640px){.ax-table.ax-table-responsive{display:block;overflow-wrap:break-word;border-width:0px}.ax-table.ax-table-responsive thead{position:absolute;inset-inline-start:-100%;top:-100%}.ax-table.ax-table-responsive td{float:inline-start;clear:both;box-sizing:border-box;display:block;width:100%;padding-left:.625rem;padding-right:.625rem;padding-top:.375rem;padding-bottom:.375rem}.ax-table.ax-table-responsive td:last-child{border-width:0px}.ax-table.ax-table-responsive td:before{content:attr(data-label);display:block;font-weight:700}.ax-table.ax-table-responsive tr{border-width:1px;border-color:rgba(var(--ax-sys-border-color))}.ax-table.ax-table-responsive tr,.ax-table.ax-table-responsive tbody{float:inline-start;margin-bottom:.625rem;width:100%}}[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-surface-input-border-color));padding:.75rem}.ax-fieldset legend{padding-left:.25rem;padding-right:.25rem;font-size:.875rem;line-height:1.25rem}.ax-card{border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-surface-input-border-color));background-color:rgba(var(--ax-sys-surface-bg-color))}.ax-drop-zone>input{position:absolute;height:100%;width:100%;cursor:pointer;opacity:0}.ax-uploader-overlay-state{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:.5rem;background-color:rgba(var(--ax-sys-color-primary-200), 0.75);font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-primary-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}.ax-dark .ax-uploader-overlay-state{background-color:rgba(var(--ax-sys-color-primary-800), 0.75);color:rgba(var(--ax-sys-color-on-primary));outline-color:rgba(var(--ax-sys-color-on-primary))}.ax-ripple{transform:scale(0);animation:ripple 500ms linear;position:absolute;border-radius:9999rem !important}@keyframes ripple{to{transform:scale(4);opacity:0}}.ax-placeholder{color:rgba(var(--ax-sys-surface-input-placeholder-color));font-size:calc(var(--ax-comp-editor-font-size)*.875)}

package/package.json

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

package/src/components/editors/index.scss

@@ -12,6 +12,7 @@
   height: var(--ax-comp-editor-height);
   width: 100%;
   overflow: hidden;
+  position: relative;
 
   ax-prefix {
     max-width: fit-content;

package/src/components/editors/looks/_fill.scss

@@ -1,6 +1,6 @@
 .ax-editor-container {
   &.ax-fill {
-    --ax-comp-editor-bg-color: var(--ax-sys-surface-low-bg-color);
+    --ax-comp-editor-bg-color: var(--ax-sys-surface-bg-color);
     --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
     --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
     --ax-comp-editor-border-color: transparent;

package/src/components/editors/looks/_solid.scss

@@ -9,7 +9,7 @@
     --ax-comp-editor-border-width: 1px;
     --ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color));
     border-width: var(--ax-comp-editor-border-width);
-    box-shadow: var(--ax-comp-editor-box-shadow);
+    // box-shadow: var(--ax-comp-editor-box-shadow);
     &:focus,
     &:focus-within,
     &:focus-visible {

package/src/mixins/_look.scss

@@ -47,7 +47,7 @@
 
 @mixin fill-look() {
   border-radius: var(--ax-sys-border-radius);
-  background-color: rgba(var(--ax-color-on-surface));
+  background-color: rgba(var(--ax-sys-surface-high-bg-color));
 
   &:focus-within {
     box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-primary-500));

package/src/shared/_action-item.scss

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

package/src/shared/_actionsheet.scss

@@ -4,7 +4,7 @@
   overflow: hidden;
   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-surface-bg-color));
+  background-color: rgba(var(--ax-sys-surface-lowest-bg-color));
   --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);
   box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);

package/src/shared/_list.scss

@@ -3,11 +3,11 @@
   .ax-list-item {
     &.ax-state-selected {
       background-color: rgba(var(--ax-sys-color-primary-800)) !important;
-      color: rgba(var(--ax-sys-color-primary-text)) !important;
+      color: rgba(var(--ax-sys-color-on-primary)) !important;
 
       // .ax-selected-icon {
       //
-      //   color: rgba(var(--ax-sys-color-primary-text));
+      //   color: rgba(var(--ax-sys-color-on-primary));
       // }
     }
   }
@@ -125,7 +125,7 @@
           }
           &.ax-state-selected {
             background-color: rgba(var(--ax-sys-color-primary-500), var(--tw-bg-opacity)) !important;
-            color: rgba(var(--ax-sys-color-primary-text), var(--tw-text-opacity)) !important;
+            color: rgba(var(--ax-sys-color-on-primary), var(--tw-text-opacity)) !important;
 
             // .ax-selected-icon {
             //
@@ -147,10 +147,10 @@
 
           &:focus-visible,
           &:hover {
-            background-color: rgba(var(--ax-color-on-surface));
+            background-color: rgba(var(--ax-sys-surface-high-bg-color));
           }
           &.ax-state-focus {
-            background-color: rgba(var(--ax-color-on-surface));
+            background-color: rgba(var(--ax-sys-surface-high-bg-color));
           }
         }
       }

package/src/shared/_table.scss

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

package/src/shared/_utils.scss

@@ -58,7 +58,7 @@
   background-color: rgba(var(--ax-sys-color-primary-200), 0.75);
   font-size: 0.875rem /* 14px */;
   line-height: 1.25rem /* 20px */;
-  color: rgba(var(--ax-sys-color-primary-text-tint));
+  color: rgba(var(--ax-sys-color-on-primary-tint));
   outline-style: dashed;
   outline-offset: -4px;
   transition-property: all;
@@ -73,7 +73,7 @@
 @include util.darkMode() {
   .ax-uploader-overlay-state {
     background-color: rgba(var(--ax-sys-color-primary-800), 0.75);
-    color: rgba(var(--ax-sys-color-primary-text));
-    outline-color: rgba(var(--ax-sys-color-primary-text));
+    color: rgba(var(--ax-sys-color-on-primary));
+    outline-color: rgba(var(--ax-sys-color-on-primary));
   }
 }

package/src/variables/_colors.scss

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

package/tailwind-base.js

@@ -17,6 +17,16 @@ const childSelector = plugin(function ({ addVariant }) {
   addVariant('child-focus-within', '& > *:focus-within');
 });
 
+const _onColors = {
+  'on-surface-light': 'rgba(var(--ax-sys-on-surface-light-color), <alpha-value>)',
+  'on-surface-lowest': 'rgba(var(--ax-sys-on-surface-lowest-color), <alpha-value>)',
+  'on-surface-low': 'rgba(var(--ax-sys-on-surface-low-color), <alpha-value>)',
+  'on-surface': 'rgba(var(--ax-sys-on-surface-color), <alpha-value>)',
+  'on-surface-high': 'rgba(var(--ax-sys-on-surface-high-color), <alpha-value>)',
+  'on-surface-highest': 'rgba(var(--ax-sys-on-surface-highest-color), <alpha-value>)',
+  'on-surface-dark': 'rgba(var(--ax-sys-on-surface-dark-color), <alpha-value>)',
+}
+
 const _bgColors = {
   default: 'rgba(var( --ax-sys-body-bg-color), <alpha-value>)',
   'surface-light': 'rgba(var(--ax-sys-surface-light-bg-color), <alpha-value>)',
@@ -27,18 +37,22 @@ const _bgColors = {
   'surface-highest': 'rgba(var(--ax-sys-surface-highest-bg-color), <alpha-value>)',
   'surface-dark': 'rgba(var(--ax-sys-surface-dark-bg-color), <alpha-value>)',
   'surface-input': 'rgba(var(--ax-sys-surface-input-bg-color), <alpha-value>)',
+  ..._onColors
+  
+
 };
 
 const _textColors = {
   DEFAULT: withOpacityValue('--ax-sys-body-text-color'),
   default: withOpacityValue('--ax-sys-body-text-color'),
-  'surface-light': 'rgba(var(--ax-sys-surface-light-text-color), <alpha-value>)',
-  'surface-lowest': 'rgba(var(--ax-sys-surface-lowest-text-color), <alpha-value>)',
-  'surface-low': 'rgba(var(--ax-sys-surface-low-text-color), <alpha-value>)',
-  surface: 'rgba(var(--ax-sys-surface-text-color), <alpha-value>)',
-  'surface-high': 'rgba(var(--ax-sys-surface-high-text-color), <alpha-value>)',
-  'surface-dark': 'rgba(var(--ax-sys-surface-dark-text-color), <alpha-value>)',
-  'surface-highest': 'rgba(var(--ax-sys-surface-highest-text-color), <alpha-value>)',
+  'surface-light': 'rgba(var(--ax-sys-on-surface-light-color), <alpha-value>)',
+  'surface-lowest': 'rgba(var(--ax-sys-on-surface-lowest-color), <alpha-value>)',
+  'surface-low': 'rgba(var(--ax-sys-on-surface-low-color), <alpha-value>)',
+  surface: 'rgba(var(--ax-sys-on-surface-color), <alpha-value>)',
+  'surface-high': 'rgba(var(--ax-sys-on-surface-high-color), <alpha-value>)',
+  'surface-dark': 'rgba(var(--ax-sys-on-surface-dark-color), <alpha-value>)',
+  'surface-highest': 'rgba(var(--ax-sys-on-surface-highest-color), <alpha-value>)',
+
 };
 
 const _borderColors = {
@@ -49,13 +63,14 @@ const _borderColors = {
   'surface-high': 'rgba(var(--ax-sys-surface-high-border-color), <alpha-value>)',
   'surface-dark': 'rgba(var(--ax-sys-surface-dark-border-color), <alpha-value>)',
   'surface-highest': 'rgba(var(--ax-sys-surface-highest-border-color), <alpha-value>)',
+
 };
 
 const createPalete = function (colorName) {
   return {
     DEFAULT: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
-    fore: `rgba(var(--ax-sys-color-${colorName}-text), <alpha-value>)`,
-    'fore-tint': `rgba(var(--ax-sys-color-${colorName}-contrast-text), <alpha-value>)`,
+    text: `rgba(var(--ax-sys-color-on-${colorName}), <alpha-value>)`,
+    'contrast-text': `rgba(var(--ax-sys-color-on-contrast-${colorName}), <alpha-value>)`,
     50: `rgba(var(--ax-sys-color-${colorName}-50), <alpha-value>)`,
     100: `rgba(var(--ax-sys-color-${colorName}-100), <alpha-value>)`,
     200: `rgba(var(--ax-sys-color-${colorName}-200), <alpha-value>)`,
@@ -78,10 +93,11 @@ module.exports = withAnimations({
     extend: {
       colors: {
         primary: createPalete('primary'),
+        secondary: createPalete('secondary'),
         success: createPalete('success'),
         danger: createPalete('danger'),
         warning: createPalete('warning'),
-        neutral: createPalete('neutral'),
+        ghost: createPalete('ghost'),
       },
       textColor: {
         ..._textColors,

package/themes/default.css

@@ -1 +1 @@
-:root{--ax-sys-body-font-size: 1rem;--ax-sys-size-base: 2.5rem;--ax-sys-transition-duration: 150ms;--ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);--ax-sys-border-radius: 0.5rem;--ax-sys-border-color: 233, 234, 235;--ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-sys-body-text-color: 22, 22, 22;--ax-sys-surface-light-bg-color: 249, 250, 251;--ax-sys-surface-light-text-color: 31, 42, 71;--ax-sys-surface-light-border-color: 243, 244, 246;--ax-sys-surface-lowest-bg-color: 255, 255, 255;--ax-sys-surface-lowest-text-color: 40, 40, 40;--ax-sys-surface-lowest-border-color: 250, 250, 250;--ax-sys-surface-low-bg-color: 250, 250, 250;--ax-sys-surface-low-text-color: 40, 40, 40;--ax-sys-surface-low-border-color: 245, 245, 245;--ax-sys-surface-bg-color: 245, 245, 245;--ax-sys-surface-text-color: 30, 30, 30;--ax-sys-surface-border-color: 233, 234, 235;--ax-sys-surface-high-bg-color: 233, 234, 235;--ax-sys-surface-high-text-color: 20, 20, 20;--ax-sys-surface-high-border-color: 213, 215, 218;--ax-sys-surface-highest-bg-color: 213, 215, 218;--ax-sys-surface-highest-text-color: 10, 10, 10;--ax-sys-surface-highest-border-color: 164, 167, 174;--ax-sys-surface-dark-bg-color: 249, 250, 251;--ax-sys-surface-dark-text-color: 31, 42, 71;--ax-sys-surface-dark-border-color: 243, 244, 246;--ax-sys-surface-input-bg-color: 255, 255, 255;--ax-sys-surface-input-text-color: 30, 30, 30;--ax-sys-surface-input-placeholder-color: 180, 180, 180;--ax-sys-surface-input-border-color: 220, 220, 220;--ax-sys-color-primary-text: 255, 255, 255;--ax-sys-color-primary-contrast-text: 11, 30, 71;--ax-sys-color-primary-50: 244, 247, 254;--ax-sys-color-primary-100: 233, 239, 253;--ax-sys-color-primary-200: 190, 208, 249;--ax-sys-color-primary-300: 146, 177, 245;--ax-sys-color-primary-400: 102, 146, 241;--ax-sys-color-primary-500: 37, 99, 235;--ax-sys-color-primary-600: 33, 89, 212;--ax-sys-color-primary-700: 26, 69, 165;--ax-sys-color-primary-800: 19, 50, 118;--ax-sys-color-primary-900: 11, 30, 71;--ax-sys-color-primary-950: 4, 10, 23;--ax-sys-color-success-text: 255, 255, 255;--ax-sys-color-success-contrast-text: 6, 78, 59;--ax-sys-color-success-50: 236, 253, 245;--ax-sys-color-success-100: 209, 250, 229;--ax-sys-color-success-200: 167, 243, 208;--ax-sys-color-success-300: 110, 231, 183;--ax-sys-color-success-400: 52, 211, 153;--ax-sys-color-success-500: 16, 185, 129;--ax-sys-color-success-600: 5, 150, 105;--ax-sys-color-success-700: 4, 120, 87;--ax-sys-color-success-800: 6, 95, 70;--ax-sys-color-success-900: 6, 78, 59;--ax-sys-color-success-950: 2, 44, 34;--ax-sys-color-warning-text: 48, 26, 10;--ax-sys-color-warning-contrast-text: 18, 15, 14;--ax-sys-color-warning-50: 255, 248, 225;--ax-sys-color-warning-100: 255, 236, 179;--ax-sys-color-warning-200: 255, 224, 130;--ax-sys-color-warning-300: 255, 213, 79;--ax-sys-color-warning-400: 255, 202, 40;--ax-sys-color-warning-500: 255, 193, 7;--ax-sys-color-warning-600: 255, 179, 0;--ax-sys-color-warning-700: 255, 160, 0;--ax-sys-color-warning-800: 255, 143, 0;--ax-sys-color-warning-900: 255, 111, 0;--ax-sys-color-warning-950: 72, 40, 15;--ax-sys-color-danger-text: 255, 255, 255;--ax-sys-color-danger-contrast-text: 127, 29, 29;--ax-sys-color-danger-50: 254, 242, 242;--ax-sys-color-danger-100: 254, 226, 226;--ax-sys-color-danger-200: 254, 202, 202;--ax-sys-color-danger-300: 252, 165, 165;--ax-sys-color-danger-400: 248, 113, 113;--ax-sys-color-danger-500: 239, 68, 68;--ax-sys-color-danger-600: 220, 38, 38;--ax-sys-color-danger-700: 185, 28, 28;--ax-sys-color-danger-800: 153, 27, 27;--ax-sys-color-danger-900: 127, 29, 29;--ax-sys-color-danger-950: 69, 10, 10;--ax-sys-color-neutral-text: 255, 255, 255;--ax-sys-color-neutral-contrast-text: 17, 24, 39;--ax-sys-color-neutral-50: 249, 250, 251;--ax-sys-color-neutral-100: 243, 244, 246;--ax-sys-color-neutral-200: 229, 231, 235;--ax-sys-color-neutral-300: 209, 213, 219;--ax-sys-color-neutral-400: 156, 163, 175;--ax-sys-color-neutral-500: 107, 114, 128;--ax-sys-color-neutral-600: 75, 85, 99;--ax-sys-color-neutral-700: 55, 65, 81;--ax-sys-color-neutral-800: 31, 41, 55;--ax-sys-color-neutral-900: 17, 24, 39;--ax-sys-color-neutral-950: 3, 7, 18}.ax-dark{--ax-sys-body-text-color: 255, 255, 255;--ax-sys-border-color: 34, 38, 47;--ax-sys-surface-lowest-bg-color: 2, 6, 23;--ax-sys-surface-lowest-text-color: 220, 220, 220;--ax-sys-surface-lowest-border-color: 15, 23, 42;--ax-sys-surface-low-bg-color: 15, 23, 42;--ax-sys-surface-low-text-color: 230, 230, 230;--ax-sys-surface-low-border-color: 30, 41, 59;--ax-sys-surface-bg-color: 30, 41, 59;--ax-sys-surface-text-color: 240, 240, 240;--ax-sys-surface-border-color: 51, 65, 85;--ax-sys-surface-high-bg-color: 51, 65, 85;--ax-sys-surface-high-text-color: 250, 250, 250;--ax-sys-surface-high-border-color: 71, 85, 105;--ax-sys-surface-highest-bg-color: 71, 85, 105;--ax-sys-surface-highest-text-color: 255, 255, 255;--ax-sys-surface-highest-border-color: 100, 116, 139;--ax-sys-surface-input-bg-color: 55, 55, 55;--ax-sys-surface-input-text-color: 240, 240, 240;--ax-sys-surface-input-placeholder-color: 100, 100, 100;--ax-sys-surface-input-border-color: 80, 80, 80;--ax-sys-color-primary-text: 19, 21, 25;--ax-sys-color-primary-contrast-text: 57, 62, 75;--ax-sys-color-primary-50: 252, 253, 255;--ax-sys-color-primary-100: 249, 250, 254;--ax-sys-color-primary-200: 236, 241, 253;--ax-sys-color-primary-300: 223, 232, 252;--ax-sys-color-primary-400: 210, 222, 251;--ax-sys-color-primary-500: 190, 208, 249;--ax-sys-color-primary-600: 171, 187, 224;--ax-sys-color-primary-700: 133, 146, 174;--ax-sys-color-primary-800: 95, 104, 125;--ax-sys-color-primary-900: 57, 62, 75;--ax-sys-color-primary-950: 19, 21, 25;--ax-sys-color-success-text: 255, 255, 255;--ax-sys-color-success-contrast-text: 6, 78, 59;--ax-sys-color-success-50: 236, 253, 245;--ax-sys-color-success-100: 209, 250, 229;--ax-sys-color-success-200: 167, 243, 208;--ax-sys-color-success-300: 110, 231, 183;--ax-sys-color-success-400: 52, 211, 153;--ax-sys-color-success-500: 16, 185, 129;--ax-sys-color-success-600: 5, 150, 105;--ax-sys-color-success-700: 4, 120, 87;--ax-sys-color-success-800: 6, 95, 70;--ax-sys-color-success-900: 6, 78, 59;--ax-sys-color-success-950: 2, 44, 34;--ax-sys-color-warning-text: 25, 22, 13;--ax-sys-color-warning-contrast-text: 77, 67, 39;--ax-sys-color-warning-50: 255, 253, 249;--ax-sys-color-warning-100: 255, 252, 243;--ax-sys-color-warning-200: 255, 246, 218;--ax-sys-color-warning-300: 255, 240, 193;--ax-sys-color-warning-400: 255, 233, 168;--ax-sys-color-warning-500: 255, 224, 130;--ax-sys-color-warning-600: 230, 202, 117;--ax-sys-color-warning-700: 179, 157, 91;--ax-sys-color-warning-800: 128, 112, 65;--ax-sys-color-warning-900: 77, 67, 39;--ax-sys-color-warning-950: 25, 22, 13;--ax-sys-color-danger-text: 24, 15, 15;--ax-sys-color-danger-contrast-text: 72, 46, 46;--ax-sys-color-danger-50: 254, 250, 250;--ax-sys-color-danger-100: 253, 245, 245;--ax-sys-color-danger-200: 250, 225, 225;--ax-sys-color-danger-300: 247, 205, 205;--ax-sys-color-danger-400: 244, 184, 184;--ax-sys-color-danger-500: 239, 154, 154;--ax-sys-color-danger-600: 215, 139, 139;--ax-sys-color-danger-700: 167, 108, 108;--ax-sys-color-danger-800: 120, 77, 77;--ax-sys-color-danger-900: 72, 46, 46;--ax-sys-color-danger-950: 24, 15, 15;--ax-sys-color-neutral-text: 18, 19, 20;--ax-sys-color-neutral-contrast-text: 53, 57, 59;--ax-sys-color-neutral-50: 251, 252, 252;--ax-sys-color-neutral-100: 247, 249, 249;--ax-sys-color-neutral-200: 231, 236, 238;--ax-sys-color-neutral-300: 216, 223, 226;--ax-sys-color-neutral-400: 200, 210, 214;--ax-sys-color-neutral-500: 176, 190, 197;--ax-sys-color-neutral-600: 158, 171, 177;--ax-sys-color-neutral-700: 123, 133, 138;--ax-sys-color-neutral-800: 88, 95, 99;--ax-sys-color-neutral-900: 53, 57, 59;--ax-sys-color-neutral-950: 18, 19, 20}
+:root,.ax-light{--ax-sys-body-font-size: 1rem;--ax-sys-size-base: 2.5rem;--ax-sys-transition-duration: 150ms;--ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);--ax-sys-border-radius: 0.5rem;--ax-sys-border-color: 233, 234, 235;--ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-sys-body-text-color: 22, 22, 22;--ax-sys-surface-light-bg-color: 255, 255, 255;--ax-sys-on-surface-light-color: 0, 0, 0;--ax-sys-surface-light-border-color: 0, 0, 0;--ax-sys-surface-lowest-bg-color: 255, 255, 255;--ax-sys-on-surface-lowest-color: 40, 40, 40;--ax-sys-surface-lowest-border-color: 233, 236, 239;--ax-sys-surface-low-bg-color: 248, 249, 250;--ax-sys-on-surface-low-color: 40, 40, 40;--ax-sys-surface-low-border-color: 233, 236, 239;--ax-sys-surface-bg-color: 239, 241, 243;--ax-sys-on-surface-color: 30, 30, 30;--ax-sys-surface-border-color: 232, 235, 238;--ax-sys-surface-high-bg-color: 234, 237, 239;--ax-sys-on-surface-high-color: 20, 20, 20;--ax-sys-surface-high-border-color: 228, 231, 234;--ax-sys-surface-highest-bg-color: 230, 233, 236;--ax-sys-on-surface-highest-color: 10, 10, 10;--ax-sys-surface-highest-border-color: 225, 229, 233;--ax-sys-surface-input-bg-color: 255, 255, 255;--ax-sys-surface-input-text-color: 30, 30, 30;--ax-sys-surface-input-placeholder-color: 180, 180, 180;--ax-sys-surface-input-border-color: 220, 220, 220;--ax-sys-surface-dark-bg-color: 0, 0, 0;--ax-sys-on-surface-dark-color: 255, 255, 255;--ax-sys-surface-dark-border-color: 255, 255, 255;--ax-sys-color-on-primary: 255, 255, 255;--ax-sys-color-on-contrast-primary: 11, 30, 71;--ax-sys-color-primary-50: 239, 246, 255;--ax-sys-color-primary-100: 219, 234, 254;--ax-sys-color-primary-200: 191, 219, 254;--ax-sys-color-primary-300: 147, 197, 253;--ax-sys-color-primary-400: 96, 165, 250;--ax-sys-color-primary-500: 59, 130, 246;--ax-sys-color-primary-600: 37, 99, 235;--ax-sys-color-primary-700: 29, 78, 216;--ax-sys-color-primary-800: 30, 64, 175;--ax-sys-color-primary-900: 30, 58, 138;--ax-sys-color-primary-950: 23, 37, 84;--ax-sys-color-on-secondary: 255, 255, 255;--ax-sys-color-on-contrast-secondary: 9, 9, 11;--ax-sys-color-secondary-50: 249, 250, 251;--ax-sys-color-secondary-100: 243, 244, 246;--ax-sys-color-secondary-200: 229, 231, 235;--ax-sys-color-secondary-300: 209, 213, 219;--ax-sys-color-secondary-400: 156, 163, 175;--ax-sys-color-secondary-500: 107, 114, 128;--ax-sys-color-secondary-600: 75, 85, 99;--ax-sys-color-secondary-700: 55, 65, 81;--ax-sys-color-secondary-800: 31, 41, 55;--ax-sys-color-secondary-900: 24, 24, 27;--ax-sys-color-secondary-950: 9, 9, 11;--ax-sys-color-on-success: 255, 255, 255;--ax-sys-color-on-contrast-success: 5, 46, 22;--ax-sys-color-success-50: 240, 253, 244;--ax-sys-color-success-100: 220, 252, 231;--ax-sys-color-success-200: 187, 247, 208;--ax-sys-color-success-300: 134, 239, 172;--ax-sys-color-success-400: 74, 222, 128;--ax-sys-color-success-500: 34, 197, 94;--ax-sys-color-success-600: 22, 163, 74;--ax-sys-color-success-700: 21, 128, 61;--ax-sys-color-success-800: 22, 101, 52;--ax-sys-color-success-900: 20, 83, 45;--ax-sys-color-success-950: 5, 46, 22;--ax-sys-color-on-warning: 255, 255, 255;--ax-sys-color-on-contrast-warning: 69, 26, 3;--ax-sys-color-warning-50: 255, 251, 235;--ax-sys-color-warning-100: 254, 243, 199;--ax-sys-color-warning-200: 253, 230, 138;--ax-sys-color-warning-300: 252, 211, 77;--ax-sys-color-warning-400: 251, 191, 36;--ax-sys-color-warning-500: 245, 158, 11;--ax-sys-color-warning-600: 217, 119, 6;--ax-sys-color-warning-700: 180, 83, 9;--ax-sys-color-warning-800: 146, 64, 14;--ax-sys-color-warning-900: 120, 53, 15;--ax-sys-color-warning-950: 69, 26, 3;--ax-sys-color-on-danger: 255, 255, 255;--ax-sys-color-on-contrast-danger: 76, 5, 25;--ax-sys-color-danger-50: 255, 241, 242;--ax-sys-color-danger-100: 255, 228, 230;--ax-sys-color-danger-200: 254, 205, 211;--ax-sys-color-danger-300: 253, 164, 175;--ax-sys-color-danger-400: 251, 113, 133;--ax-sys-color-danger-500: 244, 63, 94;--ax-sys-color-danger-600: 225, 29, 72;--ax-sys-color-danger-700: 190, 18, 60;--ax-sys-color-danger-800: 159, 18, 57;--ax-sys-color-danger-900: 136, 19, 55;--ax-sys-color-danger-950: 76, 5, 25;--ax-sys-color-on-ghost: 255, 255, 255;--ax-sys-color-on-contrast-ghost: 24, 24, 27;--ax-sys-color-ghost-50: 255, 255, 255;--ax-sys-color-ghost-100: 244, 244, 245;--ax-sys-color-ghost-200: 228, 228, 231;--ax-sys-color-ghost-300: 212, 212, 216;--ax-sys-color-ghost-400: 161, 161, 170;--ax-sys-color-ghost-500: 113, 113, 122;--ax-sys-color-ghost-600: 82, 82, 91;--ax-sys-color-ghost-700: 63, 63, 70;--ax-sys-color-ghost-800: 39, 39, 42;--ax-sys-color-ghost-900: 24, 24, 27;--ax-sys-color-ghost-950: 9, 9, 11}.ax-dark{--ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-sys-body-text-color: 255, 255, 255;--ax-sys-border-color: 34, 38, 47;--ax-sys-surface-lowest-bg-color: 15, 15, 15;--ax-sys-on-surface-lowest-color: 220, 220, 220;--ax-sys-surface-lowest-border-color: 20, 20, 20;--ax-sys-surface-low-bg-color: 20, 20, 20;--ax-sys-on-surface-low-color: 230, 230, 230;--ax-sys-surface-low-border-color: 25, 25, 25;--ax-sys-surface-bg-color: 25, 25, 25;--ax-sys-on-surface-color: 240, 240, 240;--ax-sys-surface-border-color: 34, 34, 34;--ax-sys-surface-high-bg-color: 29, 29, 29;--ax-sys-on-surface-high-color: 250, 250, 250;--ax-sys-surface-high-border-color: 43, 43, 43;--ax-sys-surface-highest-bg-color: 34, 34, 34;--ax-sys-on-surface-highest-color: 255, 255, 255;--ax-sys-surface-highest-border-color: 52, 52, 52;--ax-sys-surface-input-bg-color: var(--ax-sys-surface-lowest-bg-color);--ax-sys-surface-input-text-color: var(--ax-sys-on-surface-lowest-color);--ax-sys-surface-input-placeholder-color: 100, 100, 100;--ax-sys-surface-input-border-color: var(--ax-sys-surface-border-color);--ax-sys-color-on-primary: 11, 30, 71;--ax-sys-color-on-contrast-primary: 57, 62, 75;--ax-sys-color-primary-50: 252, 253, 255;--ax-sys-color-primary-100: 249, 250, 254;--ax-sys-color-primary-200: 236, 241, 253;--ax-sys-color-primary-300: 224, 232, 252;--ax-sys-color-primary-400: 211, 222, 251;--ax-sys-color-primary-500: 192, 208, 249;--ax-sys-color-primary-600: 173, 187, 224;--ax-sys-color-primary-700: 134, 146, 174;--ax-sys-color-primary-800: 96, 104, 125;--ax-sys-color-primary-900: 58, 62, 75;--ax-sys-color-primary-950: 19, 21, 25;--ax-sys-color-on-secondary: 58, 62, 69;--ax-sys-color-on-contrast-secondary: 70, 74, 83;--ax-sys-color-secondary-50: 255, 255, 255;--ax-sys-color-secondary-100: 241, 242, 243;--ax-sys-color-secondary-200: 227, 229, 232;--ax-sys-color-secondary-300: 213, 216, 220;--ax-sys-color-secondary-400: 199, 202, 209;--ax-sys-color-secondary-500: 172, 176, 185;--ax-sys-color-secondary-600: 144, 150, 162;--ax-sys-color-secondary-700: 116, 124, 139;--ax-sys-color-secondary-800: 93, 99, 111;--ax-sys-color-secondary-900: 70, 74, 83;--ax-sys-color-secondary-950: 58, 62, 69;--ax-sys-color-on-success: 19, 109, 52;--ax-sys-color-on-contrast-success: 23, 130, 62;--ax-sys-color-success-50: 255, 255, 255;--ax-sys-color-success-100: 233, 251, 240;--ax-sys-color-success-200: 212, 247, 225;--ax-sys-color-success-300: 190, 244, 210;--ax-sys-color-success-400: 168, 240, 195;--ax-sys-color-success-500: 125, 232, 164;--ax-sys-color-success-600: 81, 225, 134;--ax-sys-color-success-700: 38, 217, 104;--ax-sys-color-success-800: 30, 174, 83;--ax-sys-color-success-900: 23, 130, 62;--ax-sys-color-success-950: 19, 109, 52;--ax-sys-color-on-warning: 122, 79, 5;--ax-sys-color-on-contrast-warning: 147, 95, 6;--ax-sys-color-warning-50: 255, 255, 255;--ax-sys-color-warning-100: 254, 245, 231;--ax-sys-color-warning-200: 253, 236, 206;--ax-sys-color-warning-300: 252, 226, 182;--ax-sys-color-warning-400: 251, 216, 157;--ax-sys-color-warning-500: 249, 197, 108;--ax-sys-color-warning-600: 247, 177, 59;--ax-sys-color-warning-700: 245, 158, 10;--ax-sys-color-warning-800: 196, 126, 8;--ax-sys-color-warning-900: 147, 95, 6;--ax-sys-color-warning-950: 122, 79, 5;--ax-sys-color-on-danger: 121, 7, 26;--ax-sys-color-on-contrast-danger: 145, 8, 32;--ax-sys-color-danger-50: 255, 255, 255;--ax-sys-color-danger-100: 254, 231, 235;--ax-sys-color-danger-200: 252, 207, 215;--ax-sys-color-danger-300: 251, 183, 194;--ax-sys-color-danger-400: 249, 159, 174;--ax-sys-color-danger-500: 247, 110, 134;--ax-sys-color-danger-600: 244, 62, 93;--ax-sys-color-danger-700: 241, 14, 53;--ax-sys-color-danger-800: 193, 11, 42;--ax-sys-color-danger-900: 145, 8, 32;--ax-sys-color-danger-950: 121, 7, 26;--ax-sys-color-on-ghost: 24, 24, 27;--ax-sys-color-on-contrast-ghost: 244, 244, 245;--ax-sys-color-ghost-50: 9, 9, 11;--ax-sys-color-ghost-100: 24, 24, 27;--ax-sys-color-ghost-200: 39, 39, 42;--ax-sys-color-ghost-300: 63, 63, 70;--ax-sys-color-ghost-400: 82, 82, 91;--ax-sys-color-ghost-500: 113, 113, 122;--ax-sys-color-ghost-600: 161, 161, 170;--ax-sys-color-ghost-700: 212, 212, 216;--ax-sys-color-ghost-800: 228, 228, 231;--ax-sys-color-ghost-900: 244, 244, 245;--ax-sys-color-ghost-950: 250, 250, 250}

package/themes/default.scss

@@ -1,4 +1,5 @@
-:root {
+:root,
+.ax-light {
   --ax-sys-body-font-size: 1rem;
   --ax-sys-size-base: 2.5rem;
   --ax-sys-transition-duration: 150ms;
@@ -9,208 +10,237 @@
   --ax-sys-body-text-color: 22, 22, 22;
 
   // Surfaces
-  --ax-sys-surface-light-bg-color: 249, 250, 251;
-  --ax-sys-surface-light-text-color: 31, 42, 71;
-  --ax-sys-surface-light-border-color: 243, 244, 246;
+  --ax-sys-surface-light-bg-color: 255, 255, 255;
+  --ax-sys-on-surface-light-color: 0, 0, 0;
+  --ax-sys-surface-light-border-color: 0, 0, 0;
 
   --ax-sys-surface-lowest-bg-color: 255, 255, 255;
-  --ax-sys-surface-lowest-text-color: 40, 40, 40;
-  --ax-sys-surface-lowest-border-color: 250, 250, 250;
+  --ax-sys-on-surface-lowest-color: 40, 40, 40;
+  --ax-sys-surface-lowest-border-color: 233, 236, 239;
 
-  --ax-sys-surface-low-bg-color: 250, 250, 250;
-  --ax-sys-surface-low-text-color: 40, 40, 40;
-  --ax-sys-surface-low-border-color: 245, 245, 245;
+  --ax-sys-surface-low-bg-color: 248, 249, 250;
+  --ax-sys-on-surface-low-color: 40, 40, 40;
+  --ax-sys-surface-low-border-color: 233, 236, 239;
 
-  --ax-sys-surface-bg-color: 245, 245, 245;
-  --ax-sys-surface-text-color: 30, 30, 30;
-  --ax-sys-surface-border-color: 233, 234, 235;
+  --ax-sys-surface-bg-color: 239, 241, 243;
+  --ax-sys-on-surface-color: 30, 30, 30;
+  --ax-sys-surface-border-color: 232, 235, 238;
 
-  --ax-sys-surface-high-bg-color: 233, 234, 235;
-  --ax-sys-surface-high-text-color: 20, 20, 20;
-  --ax-sys-surface-high-border-color: 213, 215, 218;
+  --ax-sys-surface-high-bg-color: 234, 237, 239;
+  --ax-sys-on-surface-high-color: 20, 20, 20;
+  --ax-sys-surface-high-border-color: 228, 231, 234;
 
-  --ax-sys-surface-highest-bg-color: 213, 215, 218;
-  --ax-sys-surface-highest-text-color: 10, 10, 10;
-  --ax-sys-surface-highest-border-color: 164, 167, 174;
-
-  --ax-sys-surface-dark-bg-color: 249, 250, 251;
-  --ax-sys-surface-dark-text-color: 31, 42, 71;
-  --ax-sys-surface-dark-border-color: 243, 244, 246;
+  --ax-sys-surface-highest-bg-color: 230, 233, 236;
+  --ax-sys-on-surface-highest-color: 10, 10, 10;
+  --ax-sys-surface-highest-border-color: 225, 229, 233;
 
   --ax-sys-surface-input-bg-color: 255, 255, 255;
   --ax-sys-surface-input-text-color: 30, 30, 30;
   --ax-sys-surface-input-placeholder-color: 180, 180, 180;
   --ax-sys-surface-input-border-color: 220, 220, 220;
 
+  --ax-sys-surface-dark-bg-color: 0, 0, 0;
+  --ax-sys-on-surface-dark-color: 255, 255, 255;
+  --ax-sys-surface-dark-border-color: 255, 255, 255;
+
   // Base Colors
-  --ax-sys-color-primary-text: 255, 255, 255;
-  --ax-sys-color-primary-contrast-text: 11, 30, 71;
-  --ax-sys-color-primary-50: 244, 247, 254;
-  --ax-sys-color-primary-100: 233, 239, 253;
-  --ax-sys-color-primary-200: 190, 208, 249;
-  --ax-sys-color-primary-300: 146, 177, 245;
-  --ax-sys-color-primary-400: 102, 146, 241;
-  --ax-sys-color-primary-500: 37, 99, 235;
-  --ax-sys-color-primary-600: 33, 89, 212;
-  --ax-sys-color-primary-700: 26, 69, 165;
-  --ax-sys-color-primary-800: 19, 50, 118;
-  --ax-sys-color-primary-900: 11, 30, 71;
-  --ax-sys-color-primary-950: 4, 10, 23;
-
-  --ax-sys-color-success-text: 255, 255, 255;
-  --ax-sys-color-success-contrast-text: 6, 78, 59;
-  --ax-sys-color-success-50: 236, 253, 245;
-  --ax-sys-color-success-100: 209, 250, 229;
-  --ax-sys-color-success-200: 167, 243, 208;
-  --ax-sys-color-success-300: 110, 231, 183;
-  --ax-sys-color-success-400: 52, 211, 153;
-  --ax-sys-color-success-500: 16, 185, 129;
-  --ax-sys-color-success-600: 5, 150, 105;
-  --ax-sys-color-success-700: 4, 120, 87;
-  --ax-sys-color-success-800: 6, 95, 70;
-  --ax-sys-color-success-900: 6, 78, 59;
-  --ax-sys-color-success-950: 2, 44, 34;
-
-  --ax-sys-color-warning-text: 48, 26, 10;
-  --ax-sys-color-warning-contrast-text: 18, 15, 14;
-  --ax-sys-color-warning-50: 255, 248, 225;
-  --ax-sys-color-warning-100: 255, 236, 179;
-  --ax-sys-color-warning-200: 255, 224, 130;
-  --ax-sys-color-warning-300: 255, 213, 79;
-  --ax-sys-color-warning-400: 255, 202, 40;
-  --ax-sys-color-warning-500: 255, 193, 7;
-  --ax-sys-color-warning-600: 255, 179, 0;
-  --ax-sys-color-warning-700: 255, 160, 0;
-  --ax-sys-color-warning-800: 255, 143, 0;
-  --ax-sys-color-warning-900: 255, 111, 0;
-  --ax-sys-color-warning-950: 72, 40, 15;
-
-  --ax-sys-color-danger-text: 255, 255, 255;
-  --ax-sys-color-danger-contrast-text: 127, 29, 29;
-  --ax-sys-color-danger-50: 254, 242, 242;
-  --ax-sys-color-danger-100: 254, 226, 226;
-  --ax-sys-color-danger-200: 254, 202, 202;
-  --ax-sys-color-danger-300: 252, 165, 165;
-  --ax-sys-color-danger-400: 248, 113, 113;
-  --ax-sys-color-danger-500: 239, 68, 68;
-  --ax-sys-color-danger-600: 220, 38, 38;
-  --ax-sys-color-danger-700: 185, 28, 28;
-  --ax-sys-color-danger-800: 153, 27, 27;
-  --ax-sys-color-danger-900: 127, 29, 29;
-  --ax-sys-color-danger-950: 69, 10, 10;
-
-  --ax-sys-color-neutral-text: 255, 255, 255;
-  --ax-sys-color-neutral-contrast-text: 17, 24, 39;
-  --ax-sys-color-neutral-50: 249, 250, 251;
-  --ax-sys-color-neutral-100: 243, 244, 246;
-  --ax-sys-color-neutral-200: 229, 231, 235;
-  --ax-sys-color-neutral-300: 209, 213, 219;
-  --ax-sys-color-neutral-400: 156, 163, 175;
-  --ax-sys-color-neutral-500: 107, 114, 128;
-  --ax-sys-color-neutral-600: 75, 85, 99;
-  --ax-sys-color-neutral-700: 55, 65, 81;
-  --ax-sys-color-neutral-800: 31, 41, 55;
-  --ax-sys-color-neutral-900: 17, 24, 39;
-  --ax-sys-color-neutral-950: 3, 7, 18;
+  --ax-sys-color-on-primary: 255, 255, 255;
+  --ax-sys-color-on-contrast-primary: 11, 30, 71;
+  --ax-sys-color-primary-50: 239, 246, 255;
+  --ax-sys-color-primary-100: 219, 234, 254;
+  --ax-sys-color-primary-200: 191, 219, 254;
+  --ax-sys-color-primary-300: 147, 197, 253;
+  --ax-sys-color-primary-400: 96, 165, 250;
+  --ax-sys-color-primary-500: 59, 130, 246;
+  --ax-sys-color-primary-600: 37, 99, 235;
+  --ax-sys-color-primary-700: 29, 78, 216;
+  --ax-sys-color-primary-800: 30, 64, 175;
+  --ax-sys-color-primary-900: 30, 58, 138;
+  --ax-sys-color-primary-950: 23, 37, 84;
+
+  --ax-sys-color-on-secondary: 255, 255, 255;
+  --ax-sys-color-on-contrast-secondary: 9, 9, 11;
+  --ax-sys-color-secondary-50: 249, 250, 251;
+  --ax-sys-color-secondary-100: 243, 244, 246;
+  --ax-sys-color-secondary-200: 229, 231, 235;
+  --ax-sys-color-secondary-300: 209, 213, 219;
+  --ax-sys-color-secondary-400: 156, 163, 175;
+  --ax-sys-color-secondary-500: 107, 114, 128;
+  --ax-sys-color-secondary-600: 75, 85, 99;
+  --ax-sys-color-secondary-700: 55, 65, 81;
+  --ax-sys-color-secondary-800: 31, 41, 55;
+  --ax-sys-color-secondary-900: 24, 24, 27;
+  --ax-sys-color-secondary-950: 9, 9, 11;
+
+  --ax-sys-color-on-success: 255, 255, 255;
+  --ax-sys-color-on-contrast-success: 5, 46, 22;
+  --ax-sys-color-success-50: 240, 253, 244;
+  --ax-sys-color-success-100: 220, 252, 231;
+  --ax-sys-color-success-200: 187, 247, 208;
+  --ax-sys-color-success-300: 134, 239, 172;
+  --ax-sys-color-success-400: 74, 222, 128;
+  --ax-sys-color-success-500: 34, 197, 94;
+  --ax-sys-color-success-600: 22, 163, 74;
+  --ax-sys-color-success-700: 21, 128, 61;
+  --ax-sys-color-success-800: 22, 101, 52;
+  --ax-sys-color-success-900: 20, 83, 45;
+  --ax-sys-color-success-950: 5, 46, 22;
+
+  --ax-sys-color-on-warning: 255, 255, 255;
+  --ax-sys-color-on-contrast-warning: 69, 26, 3;
+  --ax-sys-color-warning-50: 255, 251, 235;
+  --ax-sys-color-warning-100: 254, 243, 199;
+  --ax-sys-color-warning-200: 253, 230, 138;
+  --ax-sys-color-warning-300: 252, 211, 77;
+  --ax-sys-color-warning-400: 251, 191, 36;
+  --ax-sys-color-warning-500: 245, 158, 11;
+  --ax-sys-color-warning-600: 217, 119, 6;
+  --ax-sys-color-warning-700: 180, 83, 9;
+  --ax-sys-color-warning-800: 146, 64, 14;
+  --ax-sys-color-warning-900: 120, 53, 15;
+  --ax-sys-color-warning-950: 69, 26, 3;
+
+  --ax-sys-color-on-danger: 255, 255, 255;
+  --ax-sys-color-on-contrast-danger: 76, 5, 25;
+  --ax-sys-color-danger-50: 255, 241, 242;
+  --ax-sys-color-danger-100: 255, 228, 230;
+  --ax-sys-color-danger-200: 254, 205, 211;
+  --ax-sys-color-danger-300: 253, 164, 175;
+  --ax-sys-color-danger-400: 251, 113, 133;
+  --ax-sys-color-danger-500: 244, 63, 94;
+  --ax-sys-color-danger-600: 225, 29, 72;
+  --ax-sys-color-danger-700: 190, 18, 60;
+  --ax-sys-color-danger-800: 159, 18, 57;
+  --ax-sys-color-danger-900: 136, 19, 55;
+  --ax-sys-color-danger-950: 76, 5, 25;
+
+  --ax-sys-color-on-ghost: 255, 255, 255;
+  --ax-sys-color-on-contrast-ghost: 24, 24, 27;
+  --ax-sys-color-ghost-50: 255, 255, 255;
+  --ax-sys-color-ghost-100: 244, 244, 245;
+  --ax-sys-color-ghost-200: 228, 228, 231;
+  --ax-sys-color-ghost-300: 212, 212, 216;
+  --ax-sys-color-ghost-400: 161, 161, 170;
+  --ax-sys-color-ghost-500: 113, 113, 122;
+  --ax-sys-color-ghost-600: 82, 82, 91;
+  --ax-sys-color-ghost-700: 63, 63, 70;
+  --ax-sys-color-ghost-800: 39, 39, 42;
+  --ax-sys-color-ghost-900: 24, 24, 27;
+  --ax-sys-color-ghost-950: 9, 9, 11;
 }
 
 .ax-dark {
+  --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
   --ax-sys-body-text-color: 255, 255, 255;
 
   --ax-sys-border-color: 34, 38, 47;
 
-  --ax-sys-surface-lowest-bg-color: 2, 6, 23;
-  --ax-sys-surface-lowest-text-color: 220, 220, 220;
-  --ax-sys-surface-lowest-border-color: 15, 23, 42;
+  --ax-sys-surface-lowest-bg-color: 15, 15, 15;
+  --ax-sys-on-surface-lowest-color: 220, 220, 220;
+  --ax-sys-surface-lowest-border-color: 20, 20, 20;
 
-  --ax-sys-surface-low-bg-color: 15, 23, 42;
-  --ax-sys-surface-low-text-color: 230, 230, 230;
-  --ax-sys-surface-low-border-color: 30, 41, 59;
+  --ax-sys-surface-low-bg-color: 20, 20, 20;
+  --ax-sys-on-surface-low-color: 230, 230, 230;
+  --ax-sys-surface-low-border-color: 25, 25, 25;
 
-  --ax-sys-surface-bg-color: 30, 41, 59;
-  --ax-sys-surface-text-color: 240, 240, 240;
-  --ax-sys-surface-border-color: 51, 65, 85;
+  --ax-sys-surface-bg-color: 25, 25, 25;
+  --ax-sys-on-surface-color: 240, 240, 240;
+  --ax-sys-surface-border-color: 34, 34, 34;
 
-  --ax-sys-surface-high-bg-color: 51, 65, 85;
-  --ax-sys-surface-high-text-color: 250, 250, 250;
-  --ax-sys-surface-high-border-color: 71, 85, 105;
+  --ax-sys-surface-high-bg-color: 29, 29, 29;
+  --ax-sys-on-surface-high-color: 250, 250, 250;
+  --ax-sys-surface-high-border-color: 43, 43, 43;
 
-  --ax-sys-surface-highest-bg-color: 71, 85, 105;
-  --ax-sys-surface-highest-text-color: 255, 255, 255;
-  --ax-sys-surface-highest-border-color: 100, 116, 139;
+  --ax-sys-surface-highest-bg-color: 34, 34, 34;
+  --ax-sys-on-surface-highest-color: 255, 255, 255;
+  --ax-sys-surface-highest-border-color: 52, 52, 52;
 
-  --ax-sys-surface-input-bg-color: 55, 55, 55;
-  --ax-sys-surface-input-text-color: 240, 240, 240;
+  --ax-sys-surface-input-bg-color: var(--ax-sys-surface-lowest-bg-color);
+  --ax-sys-surface-input-text-color: var(--ax-sys-on-surface-lowest-color);
   --ax-sys-surface-input-placeholder-color: 100, 100, 100;
-  --ax-sys-surface-input-border-color: 80, 80, 80;
+  --ax-sys-surface-input-border-color: var(--ax-sys-surface-border-color);
 
-  --ax-sys-color-primary-text: 19, 21, 25;
-  --ax-sys-color-primary-contrast-text: 57, 62, 75;
+  --ax-sys-color-on-primary: 11, 30, 71;
+  --ax-sys-color-on-contrast-primary: 57, 62, 75;
   --ax-sys-color-primary-50: 252, 253, 255;
   --ax-sys-color-primary-100: 249, 250, 254;
   --ax-sys-color-primary-200: 236, 241, 253;
-  --ax-sys-color-primary-300: 223, 232, 252;
-  --ax-sys-color-primary-400: 210, 222, 251;
-  --ax-sys-color-primary-500: 190, 208, 249;
-  --ax-sys-color-primary-600: 171, 187, 224;
-  --ax-sys-color-primary-700: 133, 146, 174;
-  --ax-sys-color-primary-800: 95, 104, 125;
-  --ax-sys-color-primary-900: 57, 62, 75;
+  --ax-sys-color-primary-300: 224, 232, 252;
+  --ax-sys-color-primary-400: 211, 222, 251;
+  --ax-sys-color-primary-500: 192, 208, 249;
+  --ax-sys-color-primary-600: 173, 187, 224;
+  --ax-sys-color-primary-700: 134, 146, 174;
+  --ax-sys-color-primary-800: 96, 104, 125;
+  --ax-sys-color-primary-900: 58, 62, 75;
   --ax-sys-color-primary-950: 19, 21, 25;
 
-  --ax-sys-color-success-text: 255, 255, 255;
-  --ax-sys-color-success-contrast-text: 6, 78, 59;
-  --ax-sys-color-success-50: 236, 253, 245;
-  --ax-sys-color-success-100: 209, 250, 229;
-  --ax-sys-color-success-200: 167, 243, 208;
-  --ax-sys-color-success-300: 110, 231, 183;
-  --ax-sys-color-success-400: 52, 211, 153;
-  --ax-sys-color-success-500: 16, 185, 129;
-  --ax-sys-color-success-600: 5, 150, 105;
-  --ax-sys-color-success-700: 4, 120, 87;
-  --ax-sys-color-success-800: 6, 95, 70;
-  --ax-sys-color-success-900: 6, 78, 59;
-  --ax-sys-color-success-950: 2, 44, 34;
-
-  --ax-sys-color-warning-text: 25, 22, 13;
-  --ax-sys-color-warning-contrast-text: 77, 67, 39;
-  --ax-sys-color-warning-50: 255, 253, 249;
-  --ax-sys-color-warning-100: 255, 252, 243;
-  --ax-sys-color-warning-200: 255, 246, 218;
-  --ax-sys-color-warning-300: 255, 240, 193;
-  --ax-sys-color-warning-400: 255, 233, 168;
-  --ax-sys-color-warning-500: 255, 224, 130;
-  --ax-sys-color-warning-600: 230, 202, 117;
-  --ax-sys-color-warning-700: 179, 157, 91;
-  --ax-sys-color-warning-800: 128, 112, 65;
-  --ax-sys-color-warning-900: 77, 67, 39;
-  --ax-sys-color-warning-950: 25, 22, 13;
-
-  --ax-sys-color-danger-text: 24, 15, 15;
-  --ax-sys-color-danger-contrast-text: 72, 46, 46;
-  --ax-sys-color-danger-50: 254, 250, 250;
-  --ax-sys-color-danger-100: 253, 245, 245;
-  --ax-sys-color-danger-200: 250, 225, 225;
-  --ax-sys-color-danger-300: 247, 205, 205;
-  --ax-sys-color-danger-400: 244, 184, 184;
-  --ax-sys-color-danger-500: 239, 154, 154;
-  --ax-sys-color-danger-600: 215, 139, 139;
-  --ax-sys-color-danger-700: 167, 108, 108;
-  --ax-sys-color-danger-800: 120, 77, 77;
-  --ax-sys-color-danger-900: 72, 46, 46;
-  --ax-sys-color-danger-950: 24, 15, 15;
-
-  --ax-sys-color-neutral-text: 18, 19, 20;
-  --ax-sys-color-neutral-contrast-text: 53, 57, 59;
-  --ax-sys-color-neutral-50: 251, 252, 252;
-  --ax-sys-color-neutral-100: 247, 249, 249;
-  --ax-sys-color-neutral-200: 231, 236, 238;
-  --ax-sys-color-neutral-300: 216, 223, 226;
-  --ax-sys-color-neutral-400: 200, 210, 214;
-  --ax-sys-color-neutral-500: 176, 190, 197;
-  --ax-sys-color-neutral-600: 158, 171, 177;
-  --ax-sys-color-neutral-700: 123, 133, 138;
-  --ax-sys-color-neutral-800: 88, 95, 99;
-  --ax-sys-color-neutral-900: 53, 57, 59;
-  --ax-sys-color-neutral-950: 18, 19, 20;
+  --ax-sys-color-on-secondary: 58, 62, 69;
+  --ax-sys-color-on-contrast-secondary: 70, 74, 83;
+  --ax-sys-color-secondary-50: 255, 255, 255;
+  --ax-sys-color-secondary-100: 241, 242, 243;
+  --ax-sys-color-secondary-200: 227, 229, 232;
+  --ax-sys-color-secondary-300: 213, 216, 220;
+  --ax-sys-color-secondary-400: 199, 202, 209;
+  --ax-sys-color-secondary-500: 172, 176, 185;
+  --ax-sys-color-secondary-600: 144, 150, 162;
+  --ax-sys-color-secondary-700: 116, 124, 139;
+  --ax-sys-color-secondary-800: 93, 99, 111;
+  --ax-sys-color-secondary-900: 70, 74, 83;
+  --ax-sys-color-secondary-950: 58, 62, 69;
+
+  --ax-sys-color-on-success: 19, 109, 52;
+  --ax-sys-color-on-contrast-success: 23, 130, 62;
+  --ax-sys-color-success-50: 255, 255, 255;
+  --ax-sys-color-success-100: 233, 251, 240;
+  --ax-sys-color-success-200: 212, 247, 225;
+  --ax-sys-color-success-300: 190, 244, 210;
+  --ax-sys-color-success-400: 168, 240, 195;
+  --ax-sys-color-success-500: 125, 232, 164;
+  --ax-sys-color-success-600: 81, 225, 134;
+  --ax-sys-color-success-700: 38, 217, 104;
+  --ax-sys-color-success-800: 30, 174, 83;
+  --ax-sys-color-success-900: 23, 130, 62;
+  --ax-sys-color-success-950: 19, 109, 52;
+
+  --ax-sys-color-on-warning: 122, 79, 5;
+  --ax-sys-color-on-contrast-warning: 147, 95, 6;
+  --ax-sys-color-warning-50: 255, 255, 255;
+  --ax-sys-color-warning-100: 254, 245, 231;
+  --ax-sys-color-warning-200: 253, 236, 206;
+  --ax-sys-color-warning-300: 252, 226, 182;
+  --ax-sys-color-warning-400: 251, 216, 157;
+  --ax-sys-color-warning-500: 249, 197, 108;
+  --ax-sys-color-warning-600: 247, 177, 59;
+  --ax-sys-color-warning-700: 245, 158, 10;
+  --ax-sys-color-warning-800: 196, 126, 8;
+  --ax-sys-color-warning-900: 147, 95, 6;
+  --ax-sys-color-warning-950: 122, 79, 5;
+
+  --ax-sys-color-on-danger: 121, 7, 26;
+  --ax-sys-color-on-contrast-danger: 145, 8, 32;
+  --ax-sys-color-danger-50: 255, 255, 255;
+  --ax-sys-color-danger-100: 254, 231, 235;
+  --ax-sys-color-danger-200: 252, 207, 215;
+  --ax-sys-color-danger-300: 251, 183, 194;
+  --ax-sys-color-danger-400: 249, 159, 174;
+  --ax-sys-color-danger-500: 247, 110, 134;
+  --ax-sys-color-danger-600: 244, 62, 93;
+  --ax-sys-color-danger-700: 241, 14, 53;
+  --ax-sys-color-danger-800: 193, 11, 42;
+  --ax-sys-color-danger-900: 145, 8, 32;
+  --ax-sys-color-danger-950: 121, 7, 26;
+
+  --ax-sys-color-on-ghost: 24, 24, 27;
+  --ax-sys-color-on-contrast-ghost: 244, 244, 245;
+  --ax-sys-color-ghost-50: 9, 9, 11;
+  --ax-sys-color-ghost-100: 24, 24, 27;
+  --ax-sys-color-ghost-200: 39, 39, 42;
+  --ax-sys-color-ghost-300: 63, 63, 70;
+  --ax-sys-color-ghost-400: 82, 82, 91;
+  --ax-sys-color-ghost-500: 113, 113, 122;
+  --ax-sys-color-ghost-600: 161, 161, 170;
+  --ax-sys-color-ghost-700: 212, 212, 216;
+  --ax-sys-color-ghost-800: 228, 228, 231;
+  --ax-sys-color-ghost-900: 244, 244, 245;
+  --ax-sys-color-ghost-950: 250, 250, 250;
 }

package/themes/test.scss

@@ -0,0 +1,237 @@
+:root {
+  --ax-sys-body-font-size: 1rem;
+  --ax-sys-size-base: 2.5rem;
+  --ax-sys-transition-duration: 150ms;
+  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --ax-sys-border-radius: 0.5rem;
+  --ax-sys-border-color: 233, 234, 235;
+  --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
+  --ax-sys-body-text-color: 22, 22, 22;
+
+  // Surfaces
+  --ax-sys-surface-light-bg-color: 255, 255, 255;
+  --ax-sys-on-surface-light-color: 0, 0, 0;
+  --ax-sys-surface-light-border-color: 0, 0, 0;
+
+  --ax-sys-surface-lowest-bg-color: 255, 255, 255;
+  --ax-sys-on-surface-lowest-color: 40, 40, 40;
+  --ax-sys-surface-lowest-border-color: 233, 236, 239;
+
+  --ax-sys-surface-low-bg-color: 248, 249, 250;
+  --ax-sys-on-surface-low-color: 40, 40, 40;
+  --ax-sys-surface-low-border-color: 233, 236, 239;
+
+  --ax-sys-surface-bg-color: 239, 241, 243;
+  --ax-sys-on-surface-color: 30, 30, 30;
+  --ax-sys-surface-border-color: 232, 235, 238;
+
+  --ax-sys-surface-high-bg-color: 234, 237, 239;
+  --ax-sys-on-surface-high-color: 20, 20, 20;
+  --ax-sys-surface-high-border-color: 228, 231, 234;
+
+  --ax-sys-surface-highest-bg-color: 230, 233, 236;
+  --ax-sys-on-surface-highest-color: 10, 10, 10;
+  --ax-sys-surface-highest-border-color: 225, 229, 233;
+
+  --ax-sys-surface-input-bg-color: 255, 255, 255;
+  --ax-sys-surface-input-text-color: 30, 30, 30;
+  --ax-sys-surface-input-placeholder-color: 180, 180, 180;
+  --ax-sys-surface-input-border-color: 220, 220, 220;
+
+  --ax-sys-surface-dark-bg-color: 0, 0, 0;
+  --ax-sys-on-surface-dark-color: 255, 255, 255;
+  --ax-sys-surface-dark-border-color: 255, 255, 255;
+}
+
+.ax-dark {
+  --ax-sys-body-text-color: 255, 255, 255;
+
+  --ax-sys-border-color: 34, 38, 47;
+
+  --ax-sys-surface-lowest-bg-color: 15, 15, 15;
+  --ax-sys-on-surface-lowest-color: 220, 220, 220;
+  --ax-sys-surface-lowest-border-color: 20, 20, 20;
+
+  --ax-sys-surface-low-bg-color: 20, 20, 20;
+  --ax-sys-on-surface-low-color: 230, 230, 230;
+  --ax-sys-surface-low-border-color: 25, 25, 25;
+
+  --ax-sys-surface-bg-color: 25, 25, 25;
+  --ax-sys-on-surface-color: 240, 240, 240;
+  --ax-sys-surface-border-color: 34, 34, 34;
+
+  --ax-sys-surface-high-bg-color: 29, 29, 29;
+  --ax-sys-on-surface-high-color: 250, 250, 250;
+  --ax-sys-surface-high-border-color: 43, 43, 43;
+
+  --ax-sys-surface-highest-bg-color: 34, 34, 34;
+  --ax-sys-on-surface-highest-color: 255, 255, 255;
+  --ax-sys-surface-highest-border-color: 52, 52, 52;
+
+  --ax-sys-surface-input-bg-color: var(--ax-sys-surface-lowest-bg-color);
+  --ax-sys-surface-input-text-color: var(--ax-sys-on-surface-lowest-color);
+  --ax-sys-surface-input-placeholder-color: 100, 100, 100;
+  --ax-sys-surface-input-border-color: var(--ax-sys-surface-border-color);
+}
+
+:root {
+  --ax-sys-color-primary-50: 232, 238, 253;
+  --ax-sys-color-primary-100: 208, 222, 251;
+  --ax-sys-color-primary-200: 162, 188, 246;
+  --ax-sys-color-primary-300: 115, 155, 242;
+  --ax-sys-color-primary-400: 68, 121, 238;
+  --ax-sys-color-primary-500: 21, 88, 234;
+  --ax-sys-color-primary-600: 17, 70, 187;
+  --ax-sys-color-primary-700: 13, 53, 140;
+  --ax-sys-color-primary-800: 9, 35, 93;
+  --ax-sys-color-primary-900: 4, 18, 47;
+  --ax-sys-color-primary-950: 2, 9, 23;
+  --ax-sys-on-primary: 255, 255, 255;
+  --ax-sys-on-contrast-primary: 0, 0, 0;
+  --ax-sys-color-secondary-50: 243, 242, 241;
+  --ax-sys-color-secondary-100: 231, 230, 228;
+  --ax-sys-color-secondary-200: 207, 204, 201;
+  --ax-sys-color-secondary-300: 183, 179, 174;
+  --ax-sys-color-secondary-400: 159, 153, 147;
+  --ax-sys-color-secondary-500: 135, 128, 120;
+  --ax-sys-color-secondary-600: 108, 102, 96;
+  --ax-sys-color-secondary-700: 81, 77, 72;
+  --ax-sys-color-secondary-800: 54, 51, 48;
+  --ax-sys-color-secondary-900: 27, 26, 24;
+  --ax-sys-color-secondary-950: 14, 13, 12;
+  --ax-sys-on-secondary: 0, 0, 0;
+  --ax-sys-on-contrast-secondary: 0, 0, 0;
+  --ax-sys-color-success-50: 232, 253, 246;
+  --ax-sys-color-success-100: 208, 251, 237;
+  --ax-sys-color-success-200: 161, 247, 218;
+  --ax-sys-color-success-300: 114, 243, 200;
+  --ax-sys-color-success-400: 67, 239, 182;
+  --ax-sys-color-success-500: 20, 235, 164;
+  --ax-sys-color-success-600: 16, 188, 131;
+  --ax-sys-color-success-700: 12, 141, 98;
+  --ax-sys-color-success-800: 8, 94, 65;
+  --ax-sys-color-success-900: 4, 47, 33;
+  --ax-sys-color-success-950: 2, 23, 16;
+  --ax-sys-on-success: 0, 0, 0;
+  --ax-sys-on-contrast-success: 0, 0, 0;
+  --ax-sys-color-warning-50: 254, 245, 231;
+  --ax-sys-color-warning-100: 253, 236, 206;
+  --ax-sys-color-warning-200: 251, 216, 157;
+  --ax-sys-color-warning-300: 249, 197, 108;
+  --ax-sys-color-warning-400: 247, 177, 59;
+  --ax-sys-color-warning-500: 245, 158, 10;
+  --ax-sys-color-warning-600: 196, 126, 8;
+  --ax-sys-color-warning-700: 147, 95, 6;
+  --ax-sys-color-warning-800: 98, 63, 4;
+  --ax-sys-color-warning-900: 49, 32, 2;
+  --ax-sys-color-warning-950: 24, 16, 1;
+  --ax-sys-on-warning: 0, 0, 0;
+  --ax-sys-on-contrast-warning: 0, 0, 0;
+  --ax-sys-color-danger-50: 254, 231, 235;
+  --ax-sys-color-danger-100: 252, 207, 215;
+  --ax-sys-color-danger-200: 249, 159, 174;
+  --ax-sys-color-danger-300: 247, 110, 134;
+  --ax-sys-color-danger-400: 244, 62, 93;
+  --ax-sys-color-danger-500: 241, 14, 53;
+  --ax-sys-color-danger-600: 193, 11, 42;
+  --ax-sys-color-danger-700: 145, 8, 32;
+  --ax-sys-color-danger-800: 96, 6, 21;
+  --ax-sys-color-danger-900: 48, 3, 11;
+  --ax-sys-color-danger-950: 24, 1, 5;
+  --ax-sys-on-danger: 255, 255, 255;
+  --ax-sys-on-contrast-danger: 0, 0, 0;
+  --ax-sys-color-ghost-50: 242, 242, 242;
+  --ax-sys-color-ghost-100: 230, 230, 230;
+  --ax-sys-color-ghost-200: 204, 204, 204;
+  --ax-sys-color-ghost-300: 179, 179, 179;
+  --ax-sys-color-ghost-400: 153, 153, 153;
+  --ax-sys-color-ghost-500: 128, 128, 128;
+  --ax-sys-color-ghost-600: 102, 102, 102;
+  --ax-sys-color-ghost-700: 77, 77, 77;
+  --ax-sys-color-ghost-800: 51, 51, 51;
+  --ax-sys-color-ghost-900: 26, 26, 26;
+  --ax-sys-color-ghost-950: 13, 13, 13;
+  --ax-sys-on-ghost: 255, 255, 255;
+  --ax-sys-on-contrast-ghost: 0, 0, 0;
+}
+
+.dark {
+  --ax-sys-color-primary-50: 255, 255, 255;
+  --ax-sys-color-primary-100: 232, 238, 253;
+  --ax-sys-color-primary-200: 208, 222, 251;
+  --ax-sys-color-primary-300: 185, 205, 249;
+  --ax-sys-color-primary-400: 162, 188, 246;
+  --ax-sys-color-primary-500: 115, 155, 242;
+  --ax-sys-color-primary-600: 68, 121, 238;
+  --ax-sys-color-primary-700: 21, 88, 234;
+  --ax-sys-color-primary-800: 17, 70, 187;
+  --ax-sys-color-primary-900: 13, 53, 140;
+  --ax-sys-color-primary-950: 11, 44, 117;
+  --ax-sys-on-primary: 255, 255, 255;
+  --ax-sys-on-contrast-primary: 0, 0, 0;
+  --ax-sys-color-secondary-50: 255, 255, 255;
+  --ax-sys-color-secondary-100: 243, 242, 241;
+  --ax-sys-color-secondary-200: 231, 230, 228;
+  --ax-sys-color-secondary-300: 219, 217, 214;
+  --ax-sys-color-secondary-400: 207, 204, 201;
+  --ax-sys-color-secondary-500: 183, 179, 174;
+  --ax-sys-color-secondary-600: 159, 153, 147;
+  --ax-sys-color-secondary-700: 135, 128, 120;
+  --ax-sys-color-secondary-800: 108, 102, 96;
+  --ax-sys-color-secondary-900: 81, 77, 72;
+  --ax-sys-color-secondary-950: 68, 64, 60;
+  --ax-sys-on-secondary: 0, 0, 0;
+  --ax-sys-on-contrast-secondary: 0, 0, 0;
+  --ax-sys-color-success-50: 255, 255, 255;
+  --ax-sys-color-success-100: 232, 253, 246;
+  --ax-sys-color-success-200: 208, 251, 237;
+  --ax-sys-color-success-300: 185, 249, 228;
+  --ax-sys-color-success-400: 161, 247, 218;
+  --ax-sys-color-success-500: 114, 243, 200;
+  --ax-sys-color-success-600: 67, 239, 182;
+  --ax-sys-color-success-700: 20, 235, 164;
+  --ax-sys-color-success-800: 16, 188, 131;
+  --ax-sys-color-success-900: 12, 141, 98;
+  --ax-sys-color-success-950: 10, 117, 82;
+  --ax-sys-on-success: 0, 0, 0;
+  --ax-sys-on-contrast-success: 0, 0, 0;
+  --ax-sys-color-warning-50: 255, 255, 255;
+  --ax-sys-color-warning-100: 254, 245, 231;
+  --ax-sys-color-warning-200: 253, 236, 206;
+  --ax-sys-color-warning-300: 252, 226, 182;
+  --ax-sys-color-warning-400: 251, 216, 157;
+  --ax-sys-color-warning-500: 249, 197, 108;
+  --ax-sys-color-warning-600: 247, 177, 59;
+  --ax-sys-color-warning-700: 245, 158, 10;
+  --ax-sys-color-warning-800: 196, 126, 8;
+  --ax-sys-color-warning-900: 147, 95, 6;
+  --ax-sys-color-warning-950: 122, 79, 5;
+  --ax-sys-on-warning: 0, 0, 0;
+  --ax-sys-on-contrast-warning: 0, 0, 0;
+  --ax-sys-color-danger-50: 255, 255, 255;
+  --ax-sys-color-danger-100: 254, 231, 235;
+  --ax-sys-color-danger-200: 252, 207, 215;
+  --ax-sys-color-danger-300: 251, 183, 194;
+  --ax-sys-color-danger-400: 249, 159, 174;
+  --ax-sys-color-danger-500: 247, 110, 134;
+  --ax-sys-color-danger-600: 244, 62, 93;
+  --ax-sys-color-danger-700: 241, 14, 53;
+  --ax-sys-color-danger-800: 193, 11, 42;
+  --ax-sys-color-danger-900: 145, 8, 32;
+  --ax-sys-color-danger-950: 121, 7, 26;
+  --ax-sys-on-danger: 255, 255, 255;
+  --ax-sys-on-contrast-danger: 0, 0, 0;
+  --ax-sys-color-ghost-50: 255, 255, 255;
+  --ax-sys-color-ghost-100: 242, 242, 242;
+  --ax-sys-color-ghost-200: 230, 230, 230;
+  --ax-sys-color-ghost-300: 217, 217, 217;
+  --ax-sys-color-ghost-400: 204, 204, 204;
+  --ax-sys-color-ghost-500: 179, 179, 179;
+  --ax-sys-color-ghost-600: 153, 153, 153;
+  --ax-sys-color-ghost-700: 128, 128, 128;
+  --ax-sys-color-ghost-800: 102, 102, 102;
+  --ax-sys-color-ghost-900: 77, 77, 77;
+  --ax-sys-color-ghost-950: 64, 64, 64;
+  --ax-sys-on-ghost: 255, 255, 255;
+  --ax-sys-on-contrast-ghost: 0, 0, 0;
+}