@acorex/styles 19.8.0-next.12 → 19.8.0-next.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/index.css +37 -37
  2. package/index.min.css +1 -1
  3. package/package.json +1 -1
  4. package/src/components/editors/_base.scss +1 -1
  5. package/src/components/editors/index.scss +1 -1
  6. package/src/components/editors/looks/_fill.scss +3 -3
  7. package/src/components/editors/looks/_flat.scss +3 -3
  8. package/src/components/editors/looks/_outline.scss +3 -3
  9. package/src/components/editors/looks/_solid.scss +5 -5
  10. package/src/mixins/_look.scss +4 -4
  11. package/src/shared/_action-item.scss +1 -1
  12. package/src/shared/_actionsheet.scss +1 -1
  13. package/src/shared/_check-box.scss +3 -3
  14. package/src/shared/_drop-down.scss +3 -3
  15. package/src/shared/_editor-container.scss +3 -3
  16. package/src/shared/_general-button.scss +1 -1
  17. package/src/shared/_list.scss +3 -3
  18. package/src/shared/_radio.scss +3 -3
  19. package/src/shared/_table.scss +3 -3
  20. package/src/shared/_utils.scss +3 -3
  21. package/src/utility/index.scss +1 -1
  22. package/tailwind-base.js +33 -37
  23. package/themes/default.css +1 -1
  24. package/themes/default.scss +46 -46
  25. package/themes/test.scss +52 -52
package/index.css CHANGED
@@ -373,7 +373,7 @@ body {
373
373
  --ax-comp-editor-font-weight: normal;
374
374
  --ax-comp-editor-focus-color: var(--ax-sys-color-primary-500);
375
375
  --ax-comp-editor-padding-y: 0;
376
- --ax-comp-editor-button-text-color: var(--ax-sys-surface-input-text-color);
376
+ --ax-comp-editor-button-text-color: var(--ax-sys-color-input-surface-text);
377
377
  }
378
378
 
379
379
  .ax-xs .ax-editor-container,
@@ -417,12 +417,12 @@ body {
417
417
  }
418
418
 
419
419
  .ax-editor-container.ax-solid {
420
- --ax-comp-editor-bg-color: var(--ax-sys-surface-input-bg-color);
421
- --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
422
- --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
423
- --ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);
420
+ --ax-comp-editor-bg-color: var(--ax-sys-color-input-surface);
421
+ --ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);
422
+ --ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);
423
+ --ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);
424
424
  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
425
- --ax-comp-editor-button-bg-hover-color: var(--ax-sys-surface-high-bg-color);
425
+ --ax-comp-editor-button-bg-hover-color: var(--ax-sys-color-surface-high);
426
426
  --ax-comp-editor-border-width: 1px;
427
427
  --ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color));
428
428
  border-width: var(--ax-comp-editor-border-width);
@@ -433,9 +433,9 @@ body {
433
433
  }
434
434
 
435
435
  .ax-editor-container.ax-fill {
436
- --ax-comp-editor-bg-color: var(--ax-sys-surface-bg-color);
437
- --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
438
- --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
436
+ --ax-comp-editor-bg-color: var(--ax-sys-color-surface);
437
+ --ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);
438
+ --ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);
439
439
  --ax-comp-editor-border-color: transparent;
440
440
  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
441
441
  --ax-comp-editor-border-width: 0px;
@@ -447,9 +447,9 @@ body {
447
447
 
448
448
  .ax-editor-container.ax-outline {
449
449
  --ax-comp-editor-bg-color: transparent;
450
- --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
451
- --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
452
- --ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);
450
+ --ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);
451
+ --ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);
452
+ --ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);
453
453
  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
454
454
  --ax-comp-editor-border-width: 1px;
455
455
  border-width: var(--ax-comp-editor-border-width);
@@ -461,9 +461,9 @@ body {
461
461
 
462
462
  .ax-editor-container.ax-flat {
463
463
  --ax-comp-editor-bg-color: 0, 0, 0, 0;
464
- --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
465
- --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
466
- --ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);
464
+ --ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);
465
+ --ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);
466
+ --ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);
467
467
  --ax-comp-editor-border-radius: 0px;
468
468
  --ax-comp-editor-border-width: 1px;
469
469
  border-bottom-width: var(--ax-comp-editor-border-width);
@@ -489,7 +489,7 @@ body {
489
489
  .ax-editor-container ax-prefix {
490
490
  max-width: fit-content;
491
491
  font-size: var(--ax-comp-editor-font-size);
492
- padding: var(--ax-comp-editor-decorator-padding-y, 0) var(--ax-comp-editor-decorator-padding-x);
492
+ padding-inline-start: var(--ax-comp-editor-decorator-padding-x);
493
493
  }
494
494
  .ax-editor-container ax-clear-button {
495
495
  margin-inline-end: var(--ax-comp-editor-decorator-padding-x);
@@ -609,7 +609,7 @@ body {
609
609
  overflow: hidden;
610
610
  border-top-left-radius: var(--ax-comp-action-sheet-border-radius-size);
611
611
  border-top-right-radius: var(--ax-comp-action-sheet-border-radius-size);
612
- background-color: rgba(var(--ax-sys-surface-lowest-bg-color));
612
+ background-color: rgba(var(--ax-sys-color-surface-lowest));
613
613
  --ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
614
614
  --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);
615
615
  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);
@@ -631,8 +631,8 @@ body {
631
631
  appearance: none;
632
632
  border-radius: 0.25rem;
633
633
  border-width: 1px;
634
- border-color: rgba(var(--ax-sys-surface-input-border-color));
635
- background-color: rgba(var(--ax-sys-surface-input-bg-color));
634
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
635
+ background-color: rgba(var(--ax-sys-color-input-surface));
636
636
  vertical-align: middle;
637
637
  outline: 2px solid transparent;
638
638
  outline-offset: 2px;
@@ -650,7 +650,7 @@ body {
650
650
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
651
651
  }
652
652
  .ax-checkbox:focus-visible, .ax-checkbox:focus {
653
- box-shadow: 0px 0px 0px 2px rgba(var(--ax-sys-surface-bg-color)), 0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
653
+ box-shadow: 0px 0px 0px 2px rgba(var(--ax-sys-color-surface)), 0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
654
654
  }
655
655
  .ax-checkbox:disabled {
656
656
  cursor: not-allowed;
@@ -682,7 +682,7 @@ body {
682
682
  overflow: hidden;
683
683
  border-width: 1px;
684
684
  border-color: rgba(var(--ax-sys-border-color));
685
- background-color: rgba(var(--ax-sys-surface-lowest-bg-color));
685
+ background-color: rgba(var(--ax-sys-color-surface-lowest));
686
686
  --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
687
687
  --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
688
688
  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);
@@ -695,7 +695,7 @@ body {
695
695
  }
696
696
  .ax-overlay-pane ax-header,
697
697
  .ax-overlay-pane ax-footer {
698
- background-color: rgba(var(--ax-sys-surface-bg-color));
698
+ background-color: rgba(var(--ax-sys-color-surface));
699
699
  padding: 0.75rem;
700
700
  }
701
701
  .ax-overlay-pane.ax-overlay-center {
@@ -707,7 +707,7 @@ body {
707
707
  height: auto;
708
708
  max-height: 85vh;
709
709
  width: 100%;
710
- background-color: rgba(var(--ax-sys-surface-bg-color));
710
+ background-color: rgba(var(--ax-sys-color-surface));
711
711
  border-top-left-radius: var(--ax-sys-border-radius);
712
712
  border-top-right-radius: var(--ax-sys-border-radius);
713
713
  }
@@ -731,7 +731,7 @@ body {
731
731
  padding-right: 1rem;
732
732
  font-size: 0.875rem;
733
733
  line-height: 1.25rem;
734
- color: rgb(var(--ax-sys-surface-input-text-color), 0.75);
734
+ color: rgb(var(--ax-sys-color-input-surface-text), 0.75);
735
735
  }
736
736
  .ax-general-button:hover:not(.ax-general-button:hover:disabled, .ax-state-disabled) {
737
737
  color: rgba(var(--ax-sys-color-primary-500), var(--tw-text-opacity));
@@ -789,7 +789,7 @@ body {
789
789
  height: 100%;
790
790
  flex-direction: column;
791
791
  overflow: hidden;
792
- background-color: rgba(var(--ax-sys-surface-bg-color));
792
+ background-color: rgba(var(--ax-sys-color-surface));
793
793
  font-size: 0.875rem;
794
794
  line-height: 1.25rem;
795
795
  }
@@ -899,10 +899,10 @@ body {
899
899
  opacity: 0.5;
900
900
  }
901
901
  .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 {
902
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
902
+ background-color: rgba(var(--ax-sys-color-surface-high));
903
903
  }
904
904
  .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-focus {
905
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
905
+ background-color: rgba(var(--ax-sys-color-surface-high));
906
906
  }
907
907
  .ax-list .ax-content.ax-list-items-container .ax-list-loading-container {
908
908
  display: flex;
@@ -926,8 +926,8 @@ body {
926
926
  appearance: none;
927
927
  border-radius: 9999px;
928
928
  border-width: 1px;
929
- border-color: rgba(var(--ax-sys-surface-input-border-color));
930
- background-color: rgba(var(--ax-sys-surface-input-bg-color));
929
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
930
+ background-color: rgba(var(--ax-sys-color-input-surface));
931
931
  vertical-align: middle;
932
932
  outline: 2px solid transparent;
933
933
  outline-offset: 2px;
@@ -942,7 +942,7 @@ body {
942
942
  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");
943
943
  }
944
944
  .ax-radio:focus-visible, .ax-radio:focus {
945
- box-shadow: 0px 0px 0px 2px rgba(var(--ax-sys-surface-bg-color)), 0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
945
+ box-shadow: 0px 0px 0px 2px rgba(var(--ax-sys-color-surface)), 0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
946
946
  }
947
947
  .ax-radio:disabled {
948
948
  cursor: not-allowed;
@@ -950,7 +950,7 @@ body {
950
950
  }
951
951
 
952
952
  .ax-dark .ax-table thead {
953
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
953
+ background-color: rgba(var(--ax-sys-color-surface-high));
954
954
  }
955
955
 
956
956
  .ax-table {
@@ -975,7 +975,7 @@ body {
975
975
  .ax-table thead {
976
976
  border-bottom-width: 1px;
977
977
  border-color: rgba(var(--ax-sys-border-color));
978
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
978
+ background-color: rgba(var(--ax-sys-color-surface-high));
979
979
  }
980
980
  .ax-table thead th {
981
981
  padding-left: 1rem;
@@ -987,7 +987,7 @@ body {
987
987
  text-transform: uppercase;
988
988
  }
989
989
  .ax-table.ax-table-alternate tbody tr:nth-child(even) {
990
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
990
+ background-color: rgba(var(--ax-sys-color-surface-high));
991
991
  }
992
992
  .ax-table.ax-table-bordered thead th {
993
993
  border-top-width: 0px !important;
@@ -1065,7 +1065,7 @@ body {
1065
1065
  .ax-fieldset {
1066
1066
  border-radius: var(--ax-sys-border-radius);
1067
1067
  border-width: 1px;
1068
- border-color: rgba(var(--ax-sys-surface-input-border-color));
1068
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
1069
1069
  padding: 0.75rem;
1070
1070
  }
1071
1071
  .ax-fieldset legend {
@@ -1078,8 +1078,8 @@ body {
1078
1078
  .ax-card {
1079
1079
  border-radius: var(--ax-sys-border-radius);
1080
1080
  border-width: 1px;
1081
- border-color: rgba(var(--ax-sys-surface-input-border-color));
1082
- background-color: rgba(var(--ax-sys-surface-bg-color));
1081
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
1082
+ background-color: rgba(var(--ax-sys-color-surface));
1083
1083
  }
1084
1084
 
1085
1085
  .ax-drop-zone > input {
@@ -1141,6 +1141,6 @@ body {
1141
1141
  }
1142
1142
 
1143
1143
  .ax-placeholder {
1144
- color: rgba(var(--ax-sys-surface-input-placeholder-color));
1144
+ color: rgba(var(--ax-sys-color-input-surface-placeholder));
1145
1145
  font-size: calc(var(--ax-comp-editor-font-size) * 0.875);
1146
1146
  }
package/index.min.css CHANGED
@@ -1 +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)}.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)}
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-color-input-surface-text)}.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-color-input-surface);--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--ax-comp-editor-border-radius: var(--ax-sys-border-radius);--ax-comp-editor-button-bg-hover-color: var(--ax-sys-color-surface-high);--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-color-surface);--ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--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-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--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-color-input-surface-text);--ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);--ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);--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-inline-start: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-color-surface-lowest));--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);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-color-input-surface-border));background-color:rgba(var(--ax-sys-color-input-surface));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-color-surface)),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-color-surface-lowest));--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-color-surface));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-color-surface));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-color-input-surface-text), 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-color-surface));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-color-surface-high))}.ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-focus{background-color:rgba(var(--ax-sys-color-surface-high))}.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-color-input-surface-border));background-color:rgba(var(--ax-sys-color-input-surface));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-color-surface)),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-color-surface-high))}.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-color-surface-high))}.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-color-surface-high))}.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-color-input-surface-border));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-color-input-surface-border));background-color:rgba(var(--ax-sys-color-surface))}.ax-drop-zone>input{position:absolute;height:100%;width:100%;cursor:pointer;opacity:0}.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-color-input-surface-placeholder));font-size:calc(var(--ax-comp-editor-font-size)*.875)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "19.8.0-next.12",
3
+ "version": "19.8.0-next.14",
4
4
  "main": "index.js",
5
5
  "author": "Ali Safari",
6
6
  "license": "ISC",
package/src/components/editors/_base.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  --ax-comp-editor-font-weight: normal;
7
7
  --ax-comp-editor-focus-color: var(--ax-sys-color-primary-500);
8
8
  --ax-comp-editor-padding-y: 0;
9
- --ax-comp-editor-button-text-color: var(--ax-sys-surface-input-text-color);
9
+ --ax-comp-editor-button-text-color: var(--ax-sys-color-input-surface-text);
10
10
  }
11
11
 
12
12
  .ax-xs .ax-editor-container,
package/src/components/editors/index.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  ax-prefix {
18
18
  max-width: fit-content;
19
19
  font-size: var(--ax-comp-editor-font-size);
20
- padding: var(--ax-comp-editor-decorator-padding-y, 0) var(--ax-comp-editor-decorator-padding-x);
20
+ padding-inline-start: var(--ax-comp-editor-decorator-padding-x);
21
21
  }
22
22
  ax-clear-button {
23
23
  margin-inline-end: var(--ax-comp-editor-decorator-padding-x);
package/src/components/editors/looks/_fill.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  .ax-editor-container {
2
2
  &.ax-fill {
3
- --ax-comp-editor-bg-color: var(--ax-sys-surface-bg-color);
4
- --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
5
- --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
3
+ --ax-comp-editor-bg-color: var(--ax-sys-color-surface);
4
+ --ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);
5
+ --ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);
6
6
  --ax-comp-editor-border-color: transparent;
7
7
  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
8
8
  --ax-comp-editor-border-width: 0px;
package/src/components/editors/looks/_flat.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  .ax-editor-container {
2
2
  &.ax-flat {
3
3
  --ax-comp-editor-bg-color: 0, 0, 0, 0;
4
- --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
5
- --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
6
- --ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);
4
+ --ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);
5
+ --ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);
6
+ --ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);
7
7
  --ax-comp-editor-border-radius: 0px;
8
8
  --ax-comp-editor-border-width: 1px;
9
9
  border-bottom-width: var(--ax-comp-editor-border-width);
package/src/components/editors/looks/_outline.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  .ax-editor-container {
2
2
  &.ax-outline {
3
3
  --ax-comp-editor-bg-color: transparent;
4
- --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
5
- --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
6
- --ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);
4
+ --ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);
5
+ --ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);
6
+ --ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);
7
7
  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
8
8
  --ax-comp-editor-border-width: 1px;
9
9
  border-width: var(--ax-comp-editor-border-width);
package/src/components/editors/looks/_solid.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  .ax-editor-container {
2
2
  &.ax-solid {
3
- --ax-comp-editor-bg-color: var(--ax-sys-surface-input-bg-color);
4
- --ax-comp-editor-text-color: var(--ax-sys-surface-input-text-color);
5
- --ax-comp-editor-placeholder-color: var(--ax-sys-surface-input-placeholder-color);
6
- --ax-comp-editor-border-color: var(--ax-sys-surface-input-border-color);
3
+ --ax-comp-editor-bg-color: var(--ax-sys-color-input-surface);
4
+ --ax-comp-editor-text-color: var(--ax-sys-color-input-surface-text);
5
+ --ax-comp-editor-placeholder-color: var(--ax-sys-color-input-surface-placeholder);
6
+ --ax-comp-editor-border-color: var(--ax-sys-color-input-surface-border);
7
7
  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
8
- --ax-comp-editor-button-bg-hover-color: var(--ax-sys-surface-high-bg-color);
8
+ --ax-comp-editor-button-bg-hover-color: var(--ax-sys-color-surface-high);
9
9
  --ax-comp-editor-border-width: 1px;
10
10
  --ax-comp-editor-box-shadow: inset 0px -1px rgba(var(--ax-comp-editor-border-color));
11
11
  border-width: var(--ax-comp-editor-border-width);
package/src/mixins/_look.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  @mixin solid-look() {
2
2
  border-radius: var(--ax-sys-border-radius);
3
3
  border-width: 1px;
4
- border-color: rgba(var(--ax-sys-surface-input-border-color));
5
- background-color: rgba(var(--ax-sys-surface-input-bg-color));
4
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
5
+ background-color: rgba(var(--ax-sys-color-input-surface));
6
6
 
7
7
  &:focus-within {
8
8
  box-shadow: 0px 0px 0 1px rgba(var(--ax-sys-color-primary-500));
@@ -25,7 +25,7 @@
25
25
  @mixin flat-look() {
26
26
  border-radius: 0px;
27
27
  border-bottom-width: 1px;
28
- border-color: rgba(var(--ax-sys-surface-input-border-color));
28
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
29
29
 
30
30
  &:focus-within {
31
31
  border-color: rgba(var(--ax-sys-color-primary-500));
@@ -47,7 +47,7 @@
47
47
 
48
48
  @mixin fill-look() {
49
49
  border-radius: var(--ax-sys-border-radius);
50
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
50
+ background-color: rgba(var(--ax-sys-color-surface-high));
51
51
 
52
52
  &:focus-within {
53
53
  box-shadow: 0px 0px 0 2px rgba(var(--ax-sys-color-primary-500));
package/src/shared/_action-item.scss CHANGED
@@ -63,7 +63,7 @@
63
63
 
64
64
  &:hover {
65
65
  &:not(&.ax-state-disabled, &.ax-state-selected) {
66
- // background-color: rgba(var(--ax-sys-surface-high-bg-color));
66
+ // background-color: rgba(var(--ax-sys-color-surface-high));
67
67
  ax-prefix,
68
68
  ax-suffix {
69
69
  opacity: 1;
package/src/shared/_actionsheet.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  overflow: hidden;
5
5
  border-top-left-radius: var(--ax-comp-action-sheet-border-radius-size);
6
6
  border-top-right-radius: var(--ax-comp-action-sheet-border-radius-size);
7
- background-color: rgba(var(--ax-sys-surface-lowest-bg-color));
7
+ background-color: rgba(var(--ax-sys-color-surface-lowest));
8
8
  --ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
9
9
  --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);
10
10
  box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
package/src/shared/_check-box.scss CHANGED
@@ -8,8 +8,8 @@
8
8
  appearance: none;
9
9
  border-radius: 0.25rem /* 4px */;
10
10
  border-width: 1px;
11
- border-color: rgba(var(--ax-sys-surface-input-border-color));
12
- background-color: rgba(var(--ax-sys-surface-input-bg-color));
11
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
12
+ background-color: rgba(var(--ax-sys-color-input-surface));
13
13
  vertical-align: middle;
14
14
  outline: 2px solid transparent;
15
15
  outline-offset: 2px;
@@ -33,7 +33,7 @@
33
33
  &:focus-visible,
34
34
  &:focus {
35
35
  box-shadow:
36
- 0px 0px 0px 2px rgba(var(--ax-sys-surface-bg-color)),
36
+ 0px 0px 0px 2px rgba(var(--ax-sys-color-surface)),
37
37
  0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
38
38
  }
39
39
 
package/src/shared/_drop-down.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  overflow: hidden;
28
28
  border-width: 1px;
29
29
  border-color: rgba(var(--ax-sys-border-color));
30
- background-color: rgba(var(--ax-sys-surface-lowest-bg-color));
30
+ background-color: rgba(var(--ax-sys-color-surface-lowest));
31
31
  --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
32
32
  --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
33
33
  box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
@@ -38,7 +38,7 @@
38
38
  }
39
39
  ax-header,
40
40
  ax-footer {
41
- background-color: rgba(var(--ax-sys-surface-bg-color));
41
+ background-color: rgba(var(--ax-sys-color-surface));
42
42
  padding: 0.75rem /* 12px */;
43
43
  }
44
44
 
@@ -52,7 +52,7 @@
52
52
  height: auto;
53
53
  max-height: 85vh;
54
54
  width: 100%;
55
- background-color: rgba(var(--ax-sys-surface-bg-color));
55
+ background-color: rgba(var(--ax-sys-color-surface));
56
56
  border-top-left-radius: var(--ax-sys-border-radius);
57
57
  border-top-right-radius: var(--ax-sys-border-radius);
58
58
  &.ax-full {
package/src/shared/_editor-container.scss CHANGED
@@ -70,7 +70,7 @@
70
70
  align-items: center;
71
71
  overflow: hidden;
72
72
  font-size: 0.875rem;
73
- color: rgba(var(--ax-sys-surface-input-text-color));
73
+ color: rgba(var(--ax-sys-color-input-surface-text));
74
74
 
75
75
  .ax-editor-container {
76
76
  border-radius: 0 !important;
@@ -124,7 +124,7 @@
124
124
  &::placeholder {
125
125
  font-size: inherit;
126
126
  font-weight: 400;
127
- color: rgb(var(--ax-sys-surface-input-text-color), 0.5);
127
+ color: rgb(var(--ax-sys-color-input-surface-text), 0.5);
128
128
  }
129
129
  &:focus,
130
130
  &:focus-visible,
@@ -141,7 +141,7 @@
141
141
  padding-inline-start: 0.5rem;
142
142
  font-size: 1.125rem;
143
143
  line-height: 1.75rem;
144
- color: rgba(var(--ax-sys-surface-input-text-color));
144
+ color: rgba(var(--ax-sys-color-input-surface-text));
145
145
  }
146
146
 
147
147
  &.ax-button-icon {
package/src/shared/_general-button.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  padding-right: 1rem;
10
10
  font-size: 0.875rem;
11
11
  line-height: 1.25rem;
12
- color: rgb(var(--ax-sys-surface-input-text-color), 0.75);
12
+ color: rgb(var(--ax-sys-color-input-surface-text), 0.75);
13
13
 
14
14
  &:hover {
15
15
  &:not(&:disabled, .ax-state-disabled) {
package/src/shared/_list.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  height: 100%;
18
18
  flex-direction: column;
19
19
  overflow: hidden;
20
- background-color: rgba(var(--ax-sys-surface-bg-color));
20
+ background-color: rgba(var(--ax-sys-color-surface));
21
21
  font-size: 0.875rem /* 14px */;
22
22
  line-height: 1.25rem /* 20px */;
23
23
  @include mixins.media('md') {
@@ -147,10 +147,10 @@
147
147
 
148
148
  &:focus-visible,
149
149
  &:hover {
150
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
150
+ background-color: rgba(var(--ax-sys-color-surface-high));
151
151
  }
152
152
  &.ax-state-focus {
153
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
153
+ background-color: rgba(var(--ax-sys-color-surface-high));
154
154
  }
155
155
  }
156
156
  }
package/src/shared/_radio.scss CHANGED
@@ -10,8 +10,8 @@
10
10
  appearance: none;
11
11
  border-radius: 9999px /* 4px */;
12
12
  border-width: 1px;
13
- border-color: rgba(var(--ax-sys-surface-input-border-color));
14
- background-color: rgba(var(--ax-sys-surface-input-bg-color));
13
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
14
+ background-color: rgba(var(--ax-sys-color-input-surface));
15
15
  vertical-align: middle;
16
16
  outline: 2px solid transparent;
17
17
  outline-offset: 2px;
@@ -30,7 +30,7 @@
30
30
  &:focus-visible,
31
31
  &:focus {
32
32
  box-shadow:
33
- 0px 0px 0px 2px rgba(var(--ax-sys-surface-bg-color)),
33
+ 0px 0px 0px 2px rgba(var(--ax-sys-color-surface)),
34
34
  0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
35
35
  }
36
36
 
package/src/shared/_table.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @include mixins.darkMode() {
3
3
  .ax-table {
4
4
  thead {
5
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
5
+ background-color: rgba(var(--ax-sys-color-surface-high));
6
6
  }
7
7
  }
8
8
  }
@@ -27,7 +27,7 @@
27
27
  thead {
28
28
  border-bottom-width: 1px;
29
29
  border-color: rgba(var(--ax-sys-border-color));
30
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
30
+ background-color: rgba(var(--ax-sys-color-surface-high));
31
31
 
32
32
  th {
33
33
  padding-left: 1rem /* 16px */;
@@ -43,7 +43,7 @@
43
43
  tbody {
44
44
  tr {
45
45
  &:nth-child(even) {
46
- background-color: rgba(var(--ax-sys-surface-high-bg-color));
46
+ background-color: rgba(var(--ax-sys-color-surface-high));
47
47
  }
48
48
  }
49
49
  }
package/src/shared/_utils.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  .ax-fieldset {
14
14
  border-radius: var(--ax-sys-border-radius);
15
15
  border-width: 1px;
16
- border-color: rgba(var(--ax-sys-surface-input-border-color));
16
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
17
17
  padding: 0.75rem /* 12px */;
18
18
 
19
19
  legend {
@@ -27,8 +27,8 @@
27
27
  .ax-card {
28
28
  border-radius: var(--ax-sys-border-radius);
29
29
  border-width: 1px;
30
- border-color: rgba(var(--ax-sys-surface-input-border-color));
31
- background-color: rgba(var(--ax-sys-surface-bg-color));
30
+ border-color: rgba(var(--ax-sys-color-input-surface-border));
31
+ background-color: rgba(var(--ax-sys-color-surface));
32
32
  }
33
33
 
34
34
  .ax-drop-zone {
package/src/utility/index.scss CHANGED
@@ -1,4 +1,4 @@
1
1
  .ax-placeholder {
2
- color: rgba(var(--ax-sys-surface-input-placeholder-color));
2
+ color: rgba(var(--ax-sys-color-input-surface-placeholder));
3
3
  font-size: calc(var(--ax-comp-editor-font-size) * 0.875);
4
4
  }
package/tailwind-base.js CHANGED
@@ -18,52 +18,48 @@ const childSelector = plugin(function ({ addVariant }) {
18
18
  });
19
19
 
20
20
  const _onColors = {
21
- 'on-surface-light': 'rgba(var(--ax-sys-on-surface-light-color), <alpha-value>)',
22
- 'on-surface-lowest': 'rgba(var(--ax-sys-on-surface-lowest-color), <alpha-value>)',
23
- 'on-surface-low': 'rgba(var(--ax-sys-on-surface-low-color), <alpha-value>)',
24
- 'on-surface': 'rgba(var(--ax-sys-on-surface-color), <alpha-value>)',
25
- 'on-surface-high': 'rgba(var(--ax-sys-on-surface-high-color), <alpha-value>)',
26
- 'on-surface-highest': 'rgba(var(--ax-sys-on-surface-highest-color), <alpha-value>)',
27
- 'on-surface-dark': 'rgba(var(--ax-sys-on-surface-dark-color), <alpha-value>)',
28
- }
21
+ 'on-surface-light': 'rgba(var(--ax-sys-color-on-surface-light), <alpha-value>)',
22
+ 'on-surface-lowest': 'rgba(var(--ax-sys-color-on-surface-lowest), <alpha-value>)',
23
+ 'on-surface-low': 'rgba(var(--ax-sys-color-on-surface-low), <alpha-value>)',
24
+ 'on-surface': 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
25
+ 'on-surface-high': 'rgba(var(--ax-sys-color-on-surface-high), <alpha-value>)',
26
+ 'on-surface-highest': 'rgba(var(--ax-sys-color-on-surface-highest), <alpha-value>)',
27
+ 'on-surface-dark': 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
28
+ };
29
29
 
30
30
  const _bgColors = {
31
31
  default: 'rgba(var( --ax-sys-body-bg-color), <alpha-value>)',
32
- 'surface-light': 'rgba(var(--ax-sys-surface-light-bg-color), <alpha-value>)',
33
- 'surface-lowest': 'rgba(var(--ax-sys-surface-lowest-bg-color), <alpha-value>)',
34
- 'surface-low': 'rgba(var(--ax-sys-surface-low-bg-color), <alpha-value>)',
35
- surface: 'rgba(var(--ax-sys-surface-bg-color), <alpha-value>)',
36
- 'surface-high': 'rgba(var(--ax-sys-surface-high-bg-color), <alpha-value>)',
37
- 'surface-highest': 'rgba(var(--ax-sys-surface-highest-bg-color), <alpha-value>)',
38
- 'surface-dark': 'rgba(var(--ax-sys-surface-dark-bg-color), <alpha-value>)',
39
- 'surface-input': 'rgba(var(--ax-sys-surface-input-bg-color), <alpha-value>)',
40
- ..._onColors
41
-
42
-
32
+ 'surface-light': 'rgba(var(--ax-sys-color-surface-light), <alpha-value>)',
33
+ 'surface-lowest': 'rgba(var(--ax-sys-color-surface-lowest), <alpha-value>)',
34
+ 'surface-low': 'rgba(var(--ax-sys-color-surface-low), <alpha-value>)',
35
+ surface: 'rgba(var(--ax-sys-color-surface), <alpha-value>)',
36
+ 'surface-high': 'rgba(var(--ax-sys-color-surface-high), <alpha-value>)',
37
+ 'surface-highest': 'rgba(var(--ax-sys-color-surface-highest), <alpha-value>)',
38
+ 'surface-dark': 'rgba(var(--ax-sys-color-surface-dark), <alpha-value>)',
39
+ 'surface-input': 'rgba(var(--ax-sys-color-input-surface), <alpha-value>)',
40
+ ..._onColors,
43
41
  };
44
42
 
45
43
  const _textColors = {
46
44
  DEFAULT: withOpacityValue('--ax-sys-body-text-color'),
47
45
  default: withOpacityValue('--ax-sys-body-text-color'),
48
- 'surface-light': 'rgba(var(--ax-sys-on-surface-light-color), <alpha-value>)',
49
- 'surface-lowest': 'rgba(var(--ax-sys-on-surface-lowest-color), <alpha-value>)',
50
- 'surface-low': 'rgba(var(--ax-sys-on-surface-low-color), <alpha-value>)',
51
- surface: 'rgba(var(--ax-sys-on-surface-color), <alpha-value>)',
52
- 'surface-high': 'rgba(var(--ax-sys-on-surface-high-color), <alpha-value>)',
53
- 'surface-dark': 'rgba(var(--ax-sys-on-surface-dark-color), <alpha-value>)',
54
- 'surface-highest': 'rgba(var(--ax-sys-on-surface-highest-color), <alpha-value>)',
55
-
46
+ 'surface-light': 'rgba(var(--ax-sys-color-on-surface-light), <alpha-value>)',
47
+ 'surface-lowest': 'rgba(var(--ax-sys-color-on-surface-lowest), <alpha-value>)',
48
+ 'surface-low': 'rgba(var(--ax-sys-color-on-surface-low), <alpha-value>)',
49
+ surface: 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
50
+ 'surface-high': 'rgba(var(--ax-sys-color-on-surface-high), <alpha-value>)',
51
+ 'surface-dark': 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
52
+ 'surface-highest': 'rgba(var(--ax-sys-color-on-surface-highest), <alpha-value>)',
56
53
  };
57
54
 
58
55
  const _borderColors = {
59
- 'surface-light': 'rgba(var(--ax-sys-surface-light-border-color), <alpha-value>)',
60
- 'surface-lowest': 'rgba(var(--ax-sys-surface-lowest-border-color), <alpha-value>)',
61
- 'surface-low': 'rgba(var(--ax-sys-surface-low-border-color), <alpha-value>)',
62
- surface: 'rgba(var(--ax-sys-surface-border-color), <alpha-value>)',
63
- 'surface-high': 'rgba(var(--ax-sys-surface-high-border-color), <alpha-value>)',
64
- 'surface-dark': 'rgba(var(--ax-sys-surface-dark-border-color), <alpha-value>)',
65
- 'surface-highest': 'rgba(var(--ax-sys-surface-highest-border-color), <alpha-value>)',
66
-
56
+ 'surface-light': 'rgba(var(--ax-sys-color-border-surface-light), <alpha-value>)',
57
+ 'surface-lowest': 'rgba(var(--ax-sys-color-border-surface-lowest), <alpha-value>)',
58
+ 'surface-low': 'rgba(var(--ax-sys-color-border-surface-low), <alpha-value>)',
59
+ surface: 'rgba(var(--ax-sys-color-border-surface), <alpha-value>)',
60
+ 'surface-high': 'rgba(var(--ax-sys-color-border-surface-high), <alpha-value>)',
61
+ 'surface-dark': 'rgba(var(--ax-sys-color-border-surface-dark), <alpha-value>)',
62
+ 'surface-highest': 'rgba(var(--ax-sys-color-border-surface-highest), <alpha-value>)',
67
63
  };
68
64
 
69
65
  const createPalete = function (colorName) {
@@ -109,7 +105,7 @@ module.exports = withAnimations({
109
105
  borderColor: {
110
106
  DEFAULT: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
111
107
  default: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
112
- input: 'rgba(var(--ax-sys-surface-input-border-color), <alpha-value>)',
108
+ input: 'rgba(var(--ax-sys-color-input-surface-border), <alpha-value>)',
113
109
  'border-default': 'rgba(var(--ax-sys-border-color), <alpha-value>)',
114
110
  ..._borderColors,
115
111
  },
@@ -194,7 +190,7 @@ module.exports = withAnimations({
194
190
  margin: '1rem auto',
195
191
  },
196
192
  '.heading > span': {
197
- background: 'rgba(var(--ax-sys-surface-bg-color))',
193
+ background: 'rgba(var(--ax-sys-color-surface))',
198
194
  padding: '0 0.75rem',
199
195
  },
200
196
  '.heading-start': {
package/themes/default.css CHANGED
@@ -1 +1 @@
1
- :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}
1
+ :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-color-surface-lowest);--ax-sys-body-text-color: 22, 22, 22;--ax-sys-color-surface-light: 255, 255, 255;--ax-sys-color-on-surface-light: 0, 0, 0;--ax-sys-color-border-surface-light: 0, 0, 0;--ax-sys-color-surface-lowest: 255, 255, 255;--ax-sys-color-on-surface-lowest: 40, 40, 40;--ax-sys-color-border-surface-lowest: 233, 236, 239;--ax-sys-color-surface-low: 248, 249, 250;--ax-sys-color-on-surface-low: 40, 40, 40;--ax-sys-color-border-surface-low: 233, 236, 239;--ax-sys-color-surface: 239, 241, 243;--ax-sys-color-on-surface: 30, 30, 30;--ax-sys-color-border-surface: 232, 235, 238;--ax-sys-color-surface-high: 234, 237, 239;--ax-sys-color-on-surface-high: 20, 20, 20;--ax-sys-color-border-surface-high: 228, 231, 234;--ax-sys-color-surface-highest: 230, 233, 236;--ax-sys-color-on-surface-highest: 10, 10, 10;--ax-sys-color-border-surface-highest: 225, 229, 233;--ax-sys-color-surface-dark: 0, 0, 0;--ax-sys-color-on-surface-dark: 255, 255, 255;--ax-sys-color-border-surface-dark: 255, 255, 255;--ax-sys-color-input-surface: 255, 255, 255;--ax-sys-color-input-surface-text: 30, 30, 30;--ax-sys-color-input-surface-placeholder: 180, 180, 180;--ax-sys-color-input-surface-border: 220, 220, 220;--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-color-surface-lowest);--ax-sys-body-text-color: 255, 255, 255;--ax-sys-border-color: 34, 38, 47;--ax-sys-color-surface-lowest: 15, 15, 15;--ax-sys-color-on-surface-lowest: 220, 220, 220;--ax-sys-color-border-surface-lowest: 20, 20, 20;--ax-sys-color-surface-low: 20, 20, 20;--ax-sys-color-on-surface-low: 230, 230, 230;--ax-sys-color-border-surface-low: 25, 25, 25;--ax-sys-color-surface: 25, 25, 25;--ax-sys-color-on-surface: 240, 240, 240;--ax-sys-color-border-surface: 34, 34, 34;--ax-sys-color-surface-high: 29, 29, 29;--ax-sys-color-on-surface-high: 250, 250, 250;--ax-sys-color-border-surface-high: 43, 43, 43;--ax-sys-color-surface-highest: 34, 34, 34;--ax-sys-color-on-surface-highest: 255, 255, 255;--ax-sys-color-border-surface-highest: 52, 52, 52;--ax-sys-color-input-surface: var(--ax-sys-color-surface-lowest);--ax-sys-color-input-surface-text: var(--ax-sys-color-on-surface-lowest);--ax-sys-color-input-surface-placeholder: 100, 100, 100;--ax-sys-color-input-surface-border: var(--ax-sys-color-border-surface);--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 CHANGED
@@ -6,42 +6,42 @@
6
6
  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
7
7
  --ax-sys-border-radius: 0.5rem;
8
8
  --ax-sys-border-color: 233, 234, 235;
9
- --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
9
+ --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
10
10
  --ax-sys-body-text-color: 22, 22, 22;
11
11
 
12
12
  // Surfaces
13
- --ax-sys-surface-light-bg-color: 255, 255, 255;
14
- --ax-sys-on-surface-light-color: 0, 0, 0;
15
- --ax-sys-surface-light-border-color: 0, 0, 0;
13
+ --ax-sys-color-surface-light: 255, 255, 255;
14
+ --ax-sys-color-on-surface-light: 0, 0, 0;
15
+ --ax-sys-color-border-surface-light: 0, 0, 0;
16
16
 
17
- --ax-sys-surface-lowest-bg-color: 255, 255, 255;
18
- --ax-sys-on-surface-lowest-color: 40, 40, 40;
19
- --ax-sys-surface-lowest-border-color: 233, 236, 239;
17
+ --ax-sys-color-surface-lowest: 255, 255, 255;
18
+ --ax-sys-color-on-surface-lowest: 40, 40, 40;
19
+ --ax-sys-color-border-surface-lowest: 233, 236, 239;
20
20
 
21
- --ax-sys-surface-low-bg-color: 248, 249, 250;
22
- --ax-sys-on-surface-low-color: 40, 40, 40;
23
- --ax-sys-surface-low-border-color: 233, 236, 239;
21
+ --ax-sys-color-surface-low: 248, 249, 250;
22
+ --ax-sys-color-on-surface-low: 40, 40, 40;
23
+ --ax-sys-color-border-surface-low: 233, 236, 239;
24
24
 
25
- --ax-sys-surface-bg-color: 239, 241, 243;
26
- --ax-sys-on-surface-color: 30, 30, 30;
27
- --ax-sys-surface-border-color: 232, 235, 238;
25
+ --ax-sys-color-surface: 239, 241, 243;
26
+ --ax-sys-color-on-surface: 30, 30, 30;
27
+ --ax-sys-color-border-surface: 232, 235, 238;
28
28
 
29
- --ax-sys-surface-high-bg-color: 234, 237, 239;
30
- --ax-sys-on-surface-high-color: 20, 20, 20;
31
- --ax-sys-surface-high-border-color: 228, 231, 234;
29
+ --ax-sys-color-surface-high: 234, 237, 239;
30
+ --ax-sys-color-on-surface-high: 20, 20, 20;
31
+ --ax-sys-color-border-surface-high: 228, 231, 234;
32
32
 
33
- --ax-sys-surface-highest-bg-color: 230, 233, 236;
34
- --ax-sys-on-surface-highest-color: 10, 10, 10;
35
- --ax-sys-surface-highest-border-color: 225, 229, 233;
33
+ --ax-sys-color-surface-highest: 230, 233, 236;
34
+ --ax-sys-color-on-surface-highest: 10, 10, 10;
35
+ --ax-sys-color-border-surface-highest: 225, 229, 233;
36
36
 
37
- --ax-sys-surface-input-bg-color: 255, 255, 255;
38
- --ax-sys-surface-input-text-color: 30, 30, 30;
39
- --ax-sys-surface-input-placeholder-color: 180, 180, 180;
40
- --ax-sys-surface-input-border-color: 220, 220, 220;
37
+ --ax-sys-color-surface-dark: 0, 0, 0;
38
+ --ax-sys-color-on-surface-dark: 255, 255, 255;
39
+ --ax-sys-color-border-surface-dark: 255, 255, 255;
41
40
 
42
- --ax-sys-surface-dark-bg-color: 0, 0, 0;
43
- --ax-sys-on-surface-dark-color: 255, 255, 255;
44
- --ax-sys-surface-dark-border-color: 255, 255, 255;
41
+ --ax-sys-color-input-surface: 255, 255, 255;
42
+ --ax-sys-color-input-surface-text: 30, 30, 30;
43
+ --ax-sys-color-input-surface-placeholder: 180, 180, 180;
44
+ --ax-sys-color-input-surface-border: 220, 220, 220;
45
45
 
46
46
  // Base Colors
47
47
  --ax-sys-color-on-primary: 255, 255, 255;
@@ -130,35 +130,35 @@
130
130
  }
131
131
 
132
132
  .ax-dark {
133
- --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
133
+ --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
134
134
  --ax-sys-body-text-color: 255, 255, 255;
135
135
 
136
136
  --ax-sys-border-color: 34, 38, 47;
137
137
 
138
- --ax-sys-surface-lowest-bg-color: 15, 15, 15;
139
- --ax-sys-on-surface-lowest-color: 220, 220, 220;
140
- --ax-sys-surface-lowest-border-color: 20, 20, 20;
138
+ --ax-sys-color-surface-lowest: 15, 15, 15;
139
+ --ax-sys-color-on-surface-lowest: 220, 220, 220;
140
+ --ax-sys-color-border-surface-lowest: 20, 20, 20;
141
141
 
142
- --ax-sys-surface-low-bg-color: 20, 20, 20;
143
- --ax-sys-on-surface-low-color: 230, 230, 230;
144
- --ax-sys-surface-low-border-color: 25, 25, 25;
142
+ --ax-sys-color-surface-low: 20, 20, 20;
143
+ --ax-sys-color-on-surface-low: 230, 230, 230;
144
+ --ax-sys-color-border-surface-low: 25, 25, 25;
145
145
 
146
- --ax-sys-surface-bg-color: 25, 25, 25;
147
- --ax-sys-on-surface-color: 240, 240, 240;
148
- --ax-sys-surface-border-color: 34, 34, 34;
146
+ --ax-sys-color-surface: 25, 25, 25;
147
+ --ax-sys-color-on-surface: 240, 240, 240;
148
+ --ax-sys-color-border-surface: 34, 34, 34;
149
149
 
150
- --ax-sys-surface-high-bg-color: 29, 29, 29;
151
- --ax-sys-on-surface-high-color: 250, 250, 250;
152
- --ax-sys-surface-high-border-color: 43, 43, 43;
150
+ --ax-sys-color-surface-high: 29, 29, 29;
151
+ --ax-sys-color-on-surface-high: 250, 250, 250;
152
+ --ax-sys-color-border-surface-high: 43, 43, 43;
153
153
 
154
- --ax-sys-surface-highest-bg-color: 34, 34, 34;
155
- --ax-sys-on-surface-highest-color: 255, 255, 255;
156
- --ax-sys-surface-highest-border-color: 52, 52, 52;
154
+ --ax-sys-color-surface-highest: 34, 34, 34;
155
+ --ax-sys-color-on-surface-highest: 255, 255, 255;
156
+ --ax-sys-color-border-surface-highest: 52, 52, 52;
157
157
 
158
- --ax-sys-surface-input-bg-color: var(--ax-sys-surface-lowest-bg-color);
159
- --ax-sys-surface-input-text-color: var(--ax-sys-on-surface-lowest-color);
160
- --ax-sys-surface-input-placeholder-color: 100, 100, 100;
161
- --ax-sys-surface-input-border-color: var(--ax-sys-surface-border-color);
158
+ --ax-sys-color-input-surface: var(--ax-sys-color-surface-lowest);
159
+ --ax-sys-color-input-surface-text: var(--ax-sys-color-on-surface-lowest);
160
+ --ax-sys-color-input-surface-placeholder: 100, 100, 100;
161
+ --ax-sys-color-input-surface-border: var(--ax-sys-color-border-surface);
162
162
 
163
163
  --ax-sys-color-on-primary: 11, 30, 71;
164
164
  --ax-sys-color-on-contrast-primary: 57, 62, 75;
package/themes/test.scss CHANGED
@@ -5,42 +5,42 @@
5
5
  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
6
6
  --ax-sys-border-radius: 0.5rem;
7
7
  --ax-sys-border-color: 233, 234, 235;
8
- --ax-sys-body-bg-color: var(--ax-sys-surface-lowest-bg-color);
8
+ --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
9
9
  --ax-sys-body-text-color: 22, 22, 22;
10
10
 
11
11
  // Surfaces
12
- --ax-sys-surface-light-bg-color: 255, 255, 255;
13
- --ax-sys-on-surface-light-color: 0, 0, 0;
14
- --ax-sys-surface-light-border-color: 0, 0, 0;
15
-
16
- --ax-sys-surface-lowest-bg-color: 255, 255, 255;
17
- --ax-sys-on-surface-lowest-color: 40, 40, 40;
18
- --ax-sys-surface-lowest-border-color: 233, 236, 239;
19
-
20
- --ax-sys-surface-low-bg-color: 248, 249, 250;
21
- --ax-sys-on-surface-low-color: 40, 40, 40;
22
- --ax-sys-surface-low-border-color: 233, 236, 239;
23
-
24
- --ax-sys-surface-bg-color: 239, 241, 243;
25
- --ax-sys-on-surface-color: 30, 30, 30;
26
- --ax-sys-surface-border-color: 232, 235, 238;
27
-
28
- --ax-sys-surface-high-bg-color: 234, 237, 239;
29
- --ax-sys-on-surface-high-color: 20, 20, 20;
30
- --ax-sys-surface-high-border-color: 228, 231, 234;
31
-
32
- --ax-sys-surface-highest-bg-color: 230, 233, 236;
33
- --ax-sys-on-surface-highest-color: 10, 10, 10;
34
- --ax-sys-surface-highest-border-color: 225, 229, 233;
35
-
36
- --ax-sys-surface-input-bg-color: 255, 255, 255;
37
- --ax-sys-surface-input-text-color: 30, 30, 30;
38
- --ax-sys-surface-input-placeholder-color: 180, 180, 180;
39
- --ax-sys-surface-input-border-color: 220, 220, 220;
40
-
41
- --ax-sys-surface-dark-bg-color: 0, 0, 0;
42
- --ax-sys-on-surface-dark-color: 255, 255, 255;
43
- --ax-sys-surface-dark-border-color: 255, 255, 255;
12
+ --ax-sys-color-surface-light: 255, 255, 255;
13
+ --ax-sys-color-on-surface-light: 0, 0, 0;
14
+ --ax-sys-color-border-surface-light: 0, 0, 0;
15
+
16
+ --ax-sys-color-surface-lowest: 255, 255, 255;
17
+ --ax-sys-color-on-surface-lowest: 40, 40, 40;
18
+ --ax-sys-color-border-surface-lowest: 233, 236, 239;
19
+
20
+ --ax-sys-color-surface-low: 248, 249, 250;
21
+ --ax-sys-color-on-surface-low: 40, 40, 40;
22
+ --ax-sys-color-border-surface-low: 233, 236, 239;
23
+
24
+ --ax-sys-color-surface: 239, 241, 243;
25
+ --ax-sys-color-on-surface: 30, 30, 30;
26
+ --ax-sys-color-border-surface: 232, 235, 238;
27
+
28
+ --ax-sys-color-surface-high: 234, 237, 239;
29
+ --ax-sys-color-on-surface-high: 20, 20, 20;
30
+ --ax-sys-color-border-surface-high: 228, 231, 234;
31
+
32
+ --ax-sys-color-surface-highest: 230, 233, 236;
33
+ --ax-sys-color-on-surface-highest: 10, 10, 10;
34
+ --ax-sys-color-border-surface-highest: 225, 229, 233;
35
+
36
+ --ax-sys-color-input-surface: 255, 255, 255;
37
+ --ax-sys-color-input-surface-text: 30, 30, 30;
38
+ --ax-sys-color-input-surface-placeholder: 180, 180, 180;
39
+ --ax-sys-color-input-surface-border: 220, 220, 220;
40
+
41
+ --ax-sys-color-surface-dark: 0, 0, 0;
42
+ --ax-sys-color-on-surface-dark: 255, 255, 255;
43
+ --ax-sys-color-border-surface-dark: 255, 255, 255;
44
44
  }
45
45
 
46
46
  .ax-dark {
@@ -48,30 +48,30 @@
48
48
 
49
49
  --ax-sys-border-color: 34, 38, 47;
50
50
 
51
- --ax-sys-surface-lowest-bg-color: 15, 15, 15;
52
- --ax-sys-on-surface-lowest-color: 220, 220, 220;
53
- --ax-sys-surface-lowest-border-color: 20, 20, 20;
51
+ --ax-sys-color-surface-lowest: 15, 15, 15;
52
+ --ax-sys-color-on-surface-lowest: 220, 220, 220;
53
+ --ax-sys-color-border-surface-lowest: 20, 20, 20;
54
54
 
55
- --ax-sys-surface-low-bg-color: 20, 20, 20;
56
- --ax-sys-on-surface-low-color: 230, 230, 230;
57
- --ax-sys-surface-low-border-color: 25, 25, 25;
55
+ --ax-sys-color-surface-low: 20, 20, 20;
56
+ --ax-sys-color-on-surface-low: 230, 230, 230;
57
+ --ax-sys-color-border-surface-low: 25, 25, 25;
58
58
 
59
- --ax-sys-surface-bg-color: 25, 25, 25;
60
- --ax-sys-on-surface-color: 240, 240, 240;
61
- --ax-sys-surface-border-color: 34, 34, 34;
59
+ --ax-sys-color-surface: 25, 25, 25;
60
+ --ax-sys-color-on-surface: 240, 240, 240;
61
+ --ax-sys-color-border-surface: 34, 34, 34;
62
62
 
63
- --ax-sys-surface-high-bg-color: 29, 29, 29;
64
- --ax-sys-on-surface-high-color: 250, 250, 250;
65
- --ax-sys-surface-high-border-color: 43, 43, 43;
63
+ --ax-sys-color-surface-high: 29, 29, 29;
64
+ --ax-sys-color-on-surface-high: 250, 250, 250;
65
+ --ax-sys-color-border-surface-high: 43, 43, 43;
66
66
 
67
- --ax-sys-surface-highest-bg-color: 34, 34, 34;
68
- --ax-sys-on-surface-highest-color: 255, 255, 255;
69
- --ax-sys-surface-highest-border-color: 52, 52, 52;
67
+ --ax-sys-color-surface-highest: 34, 34, 34;
68
+ --ax-sys-color-on-surface-highest: 255, 255, 255;
69
+ --ax-sys-color-border-surface-highest: 52, 52, 52;
70
70
 
71
- --ax-sys-surface-input-bg-color: var(--ax-sys-surface-lowest-bg-color);
72
- --ax-sys-surface-input-text-color: var(--ax-sys-on-surface-lowest-color);
73
- --ax-sys-surface-input-placeholder-color: 100, 100, 100;
74
- --ax-sys-surface-input-border-color: var(--ax-sys-surface-border-color);
71
+ --ax-sys-color-input-surface: var(--ax-sys-color-surface-lowest);
72
+ --ax-sys-color-input-surface-text: var(--ax-sys-color-on-surface-lowest);
73
+ --ax-sys-color-input-surface-placeholder: 100, 100, 100;
74
+ --ax-sys-color-input-surface-border: var(--ax-sys-color-border-surface);
75
75
  }
76
76
 
77
77
  :root {