@acorex/styles 21.0.0-next.62 → 21.0.0-next.64

package/package.json

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

package/themes/default.css

@@ -122,7 +122,7 @@ html.dark {
   --ax-sys-color-warning-200: 255, 221, 174;
   --ax-sys-color-warning-300: 255, 198, 128;
   --ax-sys-color-warning-400: 255, 168, 40;
-  --ax-sys-color-warning-500: 253, 154, 0;
+  --ax-sys-color-warning-500: 253, 154, 1;
   --ax-sys-color-warning-600: 224, 127, 0;
   --ax-sys-color-warning-700: 181, 100, 0;
   --ax-sys-color-warning-800: 144, 81, 20;
@@ -321,9 +321,9 @@ html.dark {
   --ax-sys-color-on-warning-light-surface: 71, 36, 0;
   --ax-sys-color-border-warning-light-surface: 255, 182, 92;
 
-  --ax-sys-color-warning-surface: 253, 154, 0;
+  --ax-sys-color-warning-surface: 253, 154, 1;
   --ax-sys-color-on-warning-surface: 255, 250, 231;
-  --ax-sys-color-border-warning-surface: 217, 132, 0;
+  --ax-sys-color-border-warning-surface: 217, 132, 1;
 
   --ax-sys-color-warning-dark-surface: 224, 127, 0;
   --ax-sys-color-on-warning-dark-surface: 255, 249, 233;
@@ -641,7 +641,7 @@ html.dark {
   --ax-sys-color-warning-400: 255, 195, 120;
   --ax-sys-color-warning-500: 255, 180, 82;
   --ax-sys-color-warning-600: 255, 165, 33;
-  --ax-sys-color-warning-700: 253, 154, 0;
+  --ax-sys-color-warning-700: 253, 154, 1;
   --ax-sys-color-warning-800: 230, 133, 0;
   --ax-sys-color-warning-900: 203, 114, 0;
   --ax-sys-color-warning-950: 190, 105, 0;
@@ -846,9 +846,9 @@ html.dark {
   --ax-sys-color-on-warning-dark-surface: 40, 14, 0;
   --ax-sys-color-border-warning-dark-surface: 255, 184, 79;
 
-  --ax-sys-color-warning-darker-surface: 253, 154, 0;
+  --ax-sys-color-warning-darker-surface: 253, 154, 1;
   --ax-sys-color-on-warning-darker-surface: 41, 13, 0;
-  --ax-sys-color-border-warning-darker-surface: 255, 172, 44;
+  --ax-sys-color-border-warning-darker-surface: 254, 172, 46;
 
   --ax-sys-color-warning-darkest-surface: 230, 133, 0;
   --ax-sys-color-on-warning-darkest-surface: 42, 12, 0;
@@ -1077,6 +1077,7 @@ html.dark {
   --ax-sys-color-accent7-darkest-surface: 222, 222, 222;
   --ax-sys-color-on-accent7-darkest-surface: 22, 22, 22;
   --ax-sys-color-border-accent7-darkest-surface: 245, 245, 245;
+
 }
 
 @theme {
@@ -1084,7 +1085,9 @@ html.dark {
   --color-text-default: rgba(var(--ax-sys-color-text-default));
   --color-border-default: rgba(var(--ax-sys-color-border-default));
   --radius-default: var(--ax-sys-border-radius);
-
+  --breakpoint-3xl: 1920px;
+  --breakpoint-4xl: 2560px;
+  
   --color-lightest: rgba(var(--ax-sys-color-lightest-surface));
   --color-on-lightest: rgba(var(--ax-sys-color-on-lightest-surface));
   --color-border-lightest: rgba(var(--ax-sys-color-border-lightest-surface));
@@ -1558,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 {
@@ -1602,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);
@@ -1670,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);
@@ -1738,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);
@@ -1806,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);
@@ -1874,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);
@@ -1942,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);
@@ -2010,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);
@@ -2078,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);
@@ -2146,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);
@@ -2214,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);
@@ -2282,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);
@@ -2350,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);
@@ -2398,6 +2765,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;
 }
@@ -2565,48 +2972,48 @@ html.dark {
   font-size: 2.5rem;
   font-weight: 500;
   line-height: 2.5rem;
-}
+}  
 @utility h2 {
   font-size: 2rem;
   font-weight: 500;
   line-height: 2rem;
-}
+}  
 @utility h3 {
   font-size: 1.75rem;
   font-weight: 500;
   line-height: 1.75rem;
-}
+}  
 @utility h4 {
   font-size: 1.5rem;
   font-weight: 500;
   line-height: 1.5rem;
-}
+}  
 @utility h5 {
   font-size: 1.125rem;
   font-weight: 500;
   line-height: 1.125rem;
-}
+}  
 @utility h6 {
   font-size: 1rem;
   font-weight: 500;
   line-height: 1rem;
-}
+}  
 @utility heading {
   width: 100%;
   border-bottom: 1px solid;
   border-color: rgba(var(--ax-sys-color-border-lightest-surface));
   line-height: 0.1em;
   margin: 1rem auto;
-}
+}  
 @utility heading-start {
   text-align: start;
-}
+}  
 @utility heading-center {
   text-align: center;
-}
+}  
 @utility heading-end {
   text-align: end;
-}
+}  
 @utility subtitle {
   opacity: 74%;
   display: block;