@acorex/styles 21.0.0-next.63 → 21.0.0-next.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "21.0.0-next.63",
+  "version": "21.0.0-next.65",
   "main": "index.css",
   "author": "Ali Safari",
   "license": "ISC",

package/themes/default.css

@@ -1561,6 +1561,34 @@ html.dark {
   border-color: var(--color-border-darkest);
 }
 
+@utility border-lightest-surface {
+  border-color: var(--color-border-lightest);
+}
+
+@utility border-lighter-surface {
+  border-color: var(--color-border-lighter);
+}
+
+@utility border-light-surface {
+  border-color: var(--color-border-light);
+}
+
+@utility border-surface {
+  border-color: var(--color-border-surface);
+}
+
+@utility border-dark-surface {
+  border-color: var(--color-border-dark);
+}
+
+@utility border-darker-surface {
+  border-color: var(--color-border-darker);
+}
+
+@utility border-darkest-surface {
+  border-color: var(--color-border-darkest);
+}
+
 /* Primary Surfaces */
 
 @utility primary-lightest-surface {
@@ -1605,6 +1633,34 @@ html.dark {
   border-color: var(--color-border-primary-darkest);
 }
 
+@utility border-primary-lightest-surface {
+  border-color: var(--color-border-primary-lightest);
+}
+
+@utility border-primary-lighter-surface {
+  border-color: var(--color-border-primary-lighter);
+}
+
+@utility border-primary-light-surface {
+  border-color: var(--color-border-primary-light);
+}
+
+@utility border-primary-surface {
+  border-color: var(--color-border-primary);
+}
+
+@utility border-primary-dark-surface {
+  border-color: var(--color-border-primary-dark);
+}
+
+@utility border-primary-darker-surface {
+  border-color: var(--color-border-primary-darker);
+}
+
+@utility border-primary-darkest-surface {
+  border-color: var(--color-border-primary-darkest);
+}
+
 @utility ax-primary {
   --ax-comp-bg-lightest: var(--color-primary-lightest);
   --ax-comp-text-lightest: var(--color-on-primary-lightest);
@@ -1673,6 +1729,34 @@ html.dark {
   border-color: var(--color-border-secondary-darkest);
 }
 
+@utility border-secondary-lightest-surface {
+  border-color: var(--color-border-secondary-lightest);
+}
+
+@utility border-secondary-lighter-surface {
+  border-color: var(--color-border-secondary-lighter);
+}
+
+@utility border-secondary-light-surface {
+  border-color: var(--color-border-secondary-light);
+}
+
+@utility border-secondary-surface {
+  border-color: var(--color-border-secondary);
+}
+
+@utility border-secondary-dark-surface {
+  border-color: var(--color-border-secondary-dark);
+}
+
+@utility border-secondary-darker-surface {
+  border-color: var(--color-border-secondary-darker);
+}
+
+@utility border-secondary-darkest-surface {
+  border-color: var(--color-border-secondary-darkest);
+}
+
 @utility ax-secondary {
   --ax-comp-bg-lightest: var(--color-secondary-lightest);
   --ax-comp-text-lightest: var(--color-on-secondary-lightest);
@@ -1741,6 +1825,34 @@ html.dark {
   border-color: var(--color-border-success-darkest);
 }
 
+@utility border-success-lightest-surface {
+  border-color: var(--color-border-success-lightest);
+}
+
+@utility border-success-lighter-surface {
+  border-color: var(--color-border-success-lighter);
+}
+
+@utility border-success-light-surface {
+  border-color: var(--color-border-success-light);
+}
+
+@utility border-success-surface {
+  border-color: var(--color-border-success);
+}
+
+@utility border-success-dark-surface {
+  border-color: var(--color-border-success-dark);
+}
+
+@utility border-success-darker-surface {
+  border-color: var(--color-border-success-darker);
+}
+
+@utility border-success-darkest-surface {
+  border-color: var(--color-border-success-darkest);
+}
+
 @utility ax-success {
   --ax-comp-bg-lightest: var(--color-success-lightest);
   --ax-comp-text-lightest: var(--color-on-success-lightest);
@@ -1809,6 +1921,34 @@ html.dark {
   border-color: var(--color-border-warning-darkest);
 }
 
+@utility border-warning-lightest-surface {
+  border-color: var(--color-border-warning-lightest);
+}
+
+@utility border-warning-lighter-surface {
+  border-color: var(--color-border-warning-lighter);
+}
+
+@utility border-warning-light-surface {
+  border-color: var(--color-border-warning-light);
+}
+
+@utility border-warning-surface {
+  border-color: var(--color-border-warning);
+}
+
+@utility border-warning-dark-surface {
+  border-color: var(--color-border-warning-dark);
+}
+
+@utility border-warning-darker-surface {
+  border-color: var(--color-border-warning-darker);
+}
+
+@utility border-warning-darkest-surface {
+  border-color: var(--color-border-warning-darkest);
+}
+
 @utility ax-warning {
   --ax-comp-bg-lightest: var(--color-warning-lightest);
   --ax-comp-text-lightest: var(--color-on-warning-lightest);
@@ -1877,6 +2017,34 @@ html.dark {
   border-color: var(--color-border-danger-darkest);
 }
 
+@utility border-danger-lightest-surface {
+  border-color: var(--color-border-danger-lightest);
+}
+
+@utility border-danger-lighter-surface {
+  border-color: var(--color-border-danger-lighter);
+}
+
+@utility border-danger-light-surface {
+  border-color: var(--color-border-danger-light);
+}
+
+@utility border-danger-surface {
+  border-color: var(--color-border-danger);
+}
+
+@utility border-danger-dark-surface {
+  border-color: var(--color-border-danger-dark);
+}
+
+@utility border-danger-darker-surface {
+  border-color: var(--color-border-danger-darker);
+}
+
+@utility border-danger-darkest-surface {
+  border-color: var(--color-border-danger-darkest);
+}
+
 @utility ax-danger {
   --ax-comp-bg-lightest: var(--color-danger-lightest);
   --ax-comp-text-lightest: var(--color-on-danger-lightest);
@@ -1945,6 +2113,34 @@ html.dark {
   border-color: var(--color-border-accent-darkest);
 }
 
+@utility border-accent-lightest-surface {
+  border-color: var(--color-border-accent-lightest);
+}
+
+@utility border-accent-lighter-surface {
+  border-color: var(--color-border-accent-lighter);
+}
+
+@utility border-accent-light-surface {
+  border-color: var(--color-border-accent-light);
+}
+
+@utility border-accent-surface {
+  border-color: var(--color-border-accent);
+}
+
+@utility border-accent-dark-surface {
+  border-color: var(--color-border-accent-dark);
+}
+
+@utility border-accent-darker-surface {
+  border-color: var(--color-border-accent-darker);
+}
+
+@utility border-accent-darkest-surface {
+  border-color: var(--color-border-accent-darkest);
+}
+
 @utility ax-accent {
   --ax-comp-bg-lightest: var(--color-accent-lightest);
   --ax-comp-text-lightest: var(--color-on-accent-lightest);
@@ -2013,6 +2209,34 @@ html.dark {
   border-color: var(--color-border-accent2-darkest);
 }
 
+@utility border-accent2-lightest-surface {
+  border-color: var(--color-border-accent2-lightest);
+}
+
+@utility border-accent2-lighter-surface {
+  border-color: var(--color-border-accent2-lighter);
+}
+
+@utility border-accent2-light-surface {
+  border-color: var(--color-border-accent2-light);
+}
+
+@utility border-accent2-surface {
+  border-color: var(--color-border-accent2);
+}
+
+@utility border-accent2-dark-surface {
+  border-color: var(--color-border-accent2-dark);
+}
+
+@utility border-accent2-darker-surface {
+  border-color: var(--color-border-accent2-darker);
+}
+
+@utility border-accent2-darkest-surface {
+  border-color: var(--color-border-accent2-darkest);
+}
+
 @utility ax-accent2 {
   --ax-comp-bg-lightest: var(--color-accent2-lightest);
   --ax-comp-text-lightest: var(--color-on-accent2-lightest);
@@ -2081,6 +2305,34 @@ html.dark {
   border-color: var(--color-border-accent3-darkest);
 }
 
+@utility border-accent3-lightest-surface {
+  border-color: var(--color-border-accent3-lightest);
+}
+
+@utility border-accent3-lighter-surface {
+  border-color: var(--color-border-accent3-lighter);
+}
+
+@utility border-accent3-light-surface {
+  border-color: var(--color-border-accent3-light);
+}
+
+@utility border-accent3-surface {
+  border-color: var(--color-border-accent3);
+}
+
+@utility border-accent3-dark-surface {
+  border-color: var(--color-border-accent3-dark);
+}
+
+@utility border-accent3-darker-surface {
+  border-color: var(--color-border-accent3-darker);
+}
+
+@utility border-accent3-darkest-surface {
+  border-color: var(--color-border-accent3-darkest);
+}
+
 @utility ax-accent3 {
   --ax-comp-bg-lightest: var(--color-accent3-lightest);
   --ax-comp-text-lightest: var(--color-on-accent3-lightest);
@@ -2149,6 +2401,34 @@ html.dark {
   border-color: var(--color-border-accent4-darkest);
 }
 
+@utility border-accent4-lightest-surface {
+  border-color: var(--color-border-accent4-lightest);
+}
+
+@utility border-accent4-lighter-surface {
+  border-color: var(--color-border-accent4-lighter);
+}
+
+@utility border-accent4-light-surface {
+  border-color: var(--color-border-accent4-light);
+}
+
+@utility border-accent4-surface {
+  border-color: var(--color-border-accent4);
+}
+
+@utility border-accent4-dark-surface {
+  border-color: var(--color-border-accent4-dark);
+}
+
+@utility border-accent4-darker-surface {
+  border-color: var(--color-border-accent4-darker);
+}
+
+@utility border-accent4-darkest-surface {
+  border-color: var(--color-border-accent4-darkest);
+}
+
 @utility ax-accent4 {
   --ax-comp-bg-lightest: var(--color-accent4-lightest);
   --ax-comp-text-lightest: var(--color-on-accent4-lightest);
@@ -2217,6 +2497,34 @@ html.dark {
   border-color: var(--color-border-accent5-darkest);
 }
 
+@utility border-accent5-lightest-surface {
+  border-color: var(--color-border-accent5-lightest);
+}
+
+@utility border-accent5-lighter-surface {
+  border-color: var(--color-border-accent5-lighter);
+}
+
+@utility border-accent5-light-surface {
+  border-color: var(--color-border-accent5-light);
+}
+
+@utility border-accent5-surface {
+  border-color: var(--color-border-accent5);
+}
+
+@utility border-accent5-dark-surface {
+  border-color: var(--color-border-accent5-dark);
+}
+
+@utility border-accent5-darker-surface {
+  border-color: var(--color-border-accent5-darker);
+}
+
+@utility border-accent5-darkest-surface {
+  border-color: var(--color-border-accent5-darkest);
+}
+
 @utility ax-accent5 {
   --ax-comp-bg-lightest: var(--color-accent5-lightest);
   --ax-comp-text-lightest: var(--color-on-accent5-lightest);
@@ -2285,6 +2593,34 @@ html.dark {
   border-color: var(--color-border-accent6-darkest);
 }
 
+@utility border-accent6-lightest-surface {
+  border-color: var(--color-border-accent6-lightest);
+}
+
+@utility border-accent6-lighter-surface {
+  border-color: var(--color-border-accent6-lighter);
+}
+
+@utility border-accent6-light-surface {
+  border-color: var(--color-border-accent6-light);
+}
+
+@utility border-accent6-surface {
+  border-color: var(--color-border-accent6);
+}
+
+@utility border-accent6-dark-surface {
+  border-color: var(--color-border-accent6-dark);
+}
+
+@utility border-accent6-darker-surface {
+  border-color: var(--color-border-accent6-darker);
+}
+
+@utility border-accent6-darkest-surface {
+  border-color: var(--color-border-accent6-darkest);
+}
+
 @utility ax-accent6 {
   --ax-comp-bg-lightest: var(--color-accent6-lightest);
   --ax-comp-text-lightest: var(--color-on-accent6-lightest);
@@ -2353,6 +2689,34 @@ html.dark {
   border-color: var(--color-border-accent7-darkest);
 }
 
+@utility border-accent7-lightest-surface {
+  border-color: var(--color-border-accent7-lightest);
+}
+
+@utility border-accent7-lighter-surface {
+  border-color: var(--color-border-accent7-lighter);
+}
+
+@utility border-accent7-light-surface {
+  border-color: var(--color-border-accent7-light);
+}
+
+@utility border-accent7-surface {
+  border-color: var(--color-border-accent7);
+}
+
+@utility border-accent7-dark-surface {
+  border-color: var(--color-border-accent7-dark);
+}
+
+@utility border-accent7-darker-surface {
+  border-color: var(--color-border-accent7-darker);
+}
+
+@utility border-accent7-darkest-surface {
+  border-color: var(--color-border-accent7-darkest);
+}
+
 @utility ax-accent7 {
   --ax-comp-bg-lightest: var(--color-accent7-lightest);
   --ax-comp-text-lightest: var(--color-on-accent7-lightest);
@@ -2389,6 +2753,32 @@ html.dark {
   border-color: var(--color-border-default);
 }
 
+@utility border-s-default {
+  border-inline-start-width: 1px;
+}
+
+@utility border-e-default {
+  border-inline-end-width: 1px;
+}
+
+@utility border-t-default {
+  border-top-width: 1px;
+}
+
+@utility border-b-default {
+  border-bottom-width: 1px;
+}
+
+@utility border-x-default {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+
+@utility border-y-default {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
 @utility text-default {
   color: var(--color-text-default);
 }
@@ -2401,6 +2791,46 @@ html.dark {
   max-width: 90rem;
 }
 
+@utility rounded-default {
+  border-radius: var(--radius-default);
+}
+
+@utility rounded-s-default {
+  border-start-start-radius: var(--radius-default);
+  border-end-start-radius: var(--radius-default);
+}
+
+@utility rounded-e-default {
+  border-start-end-radius: var(--radius-default);
+  border-end-end-radius: var(--radius-default);
+}
+
+@utility rounded-t-default {
+  border-top-left-radius: var(--radius-default);
+  border-top-right-radius: var(--radius-default);
+}
+
+@utility rounded-b-default {
+  border-bottom-left-radius: var(--radius-default);
+  border-bottom-right-radius: var(--radius-default);
+}
+
+@utility rounded-tl-default {
+  border-top-left-radius: var(--radius-default);
+}
+
+@utility rounded-tr-default {
+  border-top-right-radius: var(--radius-default);
+}
+
+@utility rounded-bl-default {
+  border-bottom-left-radius: var(--radius-default);
+}
+
+@utility rounded-br-default {
+  border-bottom-right-radius: var(--radius-default);
+}
+
 @utility ax-state-disabled {
   @apply cursor-not-allowed opacity-50 *:cursor-not-allowed;
 }