@acorex/styles 7.0.27 → 7.0.28

package/index.scss

@@ -1,3 +1,5 @@
+@import '@angular/cdk/overlay-prebuilt.css';
+
 @import './src/variables/colors';
 @import './src/icons/style.scss';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "7.0.27",
+  "version": "7.0.28",
   "description": "",
   "main": "index.js",
   "author": "",

package/src/base/_theme.scss

@@ -5,7 +5,7 @@
   --ax-color-surface: 255, 255, 255;
   --ax-color-on-surface: 242, 242, 242;
   --ax-color-ghost: 30, 41, 59;
-  --ax-color-ghost-fore: 255, 255, 255;
+  --ax-color-ghost-fore: 0, 0, 0;
 }
 @mixin dark-variables() {
   --ax-color-background-default: 23, 32, 46;
@@ -14,5 +14,5 @@
   --ax-color-surface: 45, 50, 63;
   --ax-color-on-surface: 60, 68, 79;
   --ax-color-ghost: 255, 255, 255;
-  --ax-color-ghost-fore: 0, 0, 0;
+  --ax-color-ghost-fore: 255, 255, 255;
 }

package/src/shared/_editor-container.scss

@@ -15,6 +15,10 @@
   border-radius: var(--ax-rounded-border-default);
   font-size: 1rem;
   overflow: hidden;
+  &:focus-within {
+    border-color: rgb(var(--ax-color-primary-500));
+    box-shadow: 0px 0 0px 1px rgb(var(--ax-color-primary-500));
+  }
 
   &.ax-sm {
     .ax-input {
@@ -48,10 +52,6 @@
     line-height: 1.25rem;
     color: rgba(var(--ax-color-ghost), 0.63);
   }
-  &:focus-within {
-    border-color: rgb(var(--ax-color-primary-500));
-    box-shadow: 0px 0 0px 1px rgb(var(--ax-color-primary-500));
-  }
 
   &.ax-button-icon {
     padding-left: 0.5rem;
@@ -81,7 +81,7 @@
   & > .ax-prefix {
     *,
     .ax-button,
-    .ax-title {
+    ax-title {
       border-start-start-radius: 0.25rem /* 4px */;
       border-end-start-radius: 0.25rem;
     }
@@ -90,7 +90,7 @@
   & > .ax-suffix {
     *,
     .ax-button,
-    .ax-title {
+    ax-title {
       border-start-end-radius: 0.25rem /* 4px */;
       border-end-end-radius: 0.25rem;
     }
@@ -106,15 +106,28 @@
       border-radius: 0px;
     }
 
-    .ax-icon {
+    ax-icon {
       padding-left: 0.5rem /* 8px */;
       padding-right: 0.5rem;
     }
 
-    .ax-title {
+    ax-title {
       padding-left: 1rem /* 16px */;
       padding-right: 1rem /* 16px */;
     }
+
+    & > ax-text {
+      font-size: 0.875rem;
+      background-color: rgba(var(--ax-color-ghost), 0.05);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 0.5rem;
+      border-inline-start: 1px solid;
+      border-color: rgb(var(--ax-color-border-default));
+      color: rgba(var(--ax-color-ghost-fore));
+      line-height: 1;
+    }
   }
 
   .ax-button {

package/src/shared/_general-button.scss

@@ -29,7 +29,7 @@
     font-size: 1.5rem;
     width: var(--ax-size-default);
     height: var(--ax-size-default);
-    .ax-icon {
+    ax-icon {
       font-size: 1.5rem;
     }
   }

package/src/shared/_radio.scss

@@ -9,7 +9,7 @@
   height: 1rem;
   border: 1px solid;
   border-color: rgba(var(--ax-color-ghost), 0.3);
-  border-radius: 999rem;
+  border-radius: 99rem;
   background-color: rgb(var(--ax-color-surface));
   outline: 2px solid transparent;
   outline-offset: 2px;

package/src/shared/_utils.scss

@@ -1,45 +1,52 @@
-@import "../variables/index.scss";
+@import '../variables/index.scss';
 
-[class*=" ax-icon-"],
-[class^="ax-icon-"] {
-    vertical-align: middle;
+[class*=' ax-icon-'],
+[class^='ax-icon-'] {
+  vertical-align: middle;
 }
 
 .ax-rotaion-0 {
-    transform: rotate(0);
+  transform: rotate(0);
 }
 
 @each $deg in $degrees {
-    .ax-rotation-#{$deg} {
-        transform: rotate(#{$deg}deg);
-    }
+  .ax-rotation-#{$deg} {
+    transform: rotate(#{$deg}deg);
+  }
 
-    .-ax-rotation-#{$deg} {
-        transform: rotate(-#{$deg}deg);
-    }
+  .-ax-rotation-#{$deg} {
+    transform: rotate(-#{$deg}deg);
+  }
 }
 
 .ax-transition-all {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 
 .ax-w-full {
-    width: 100%;
+  width: 100%;
 }
 
 .ax-h-full {
-    height: 100%;
+  height: 100%;
 }
 
 .ax-fieldset {
-    border: 1px solid;
-    border-color: rgb(var(--ax-color-border-default));
-    padding: 0.75rem;
-    border-radius: var(--ax-rounded-border-default);
-    legend {
-        font-size: 0.875rem;
-        padding: 0 0.25rem;
-    }
+  border: 1px solid;
+  border-color: rgb(var(--ax-color-border-default));
+  padding: 0.75rem;
+  border-radius: var(--ax-rounded-border-default);
+  legend {
+    font-size: 0.875rem;
+    padding: 0 0.25rem;
+  }
+}
+
+.ax-card {
+  background-color: rgb(var(--ax-color-surface));
+  border: 1px solid;
+  border-color: rgb(var(--ax-color-border-default));
+  border-radius: var(--ax-rounded-border-default);
 }

package/tailwind.config.js

@@ -15,13 +15,8 @@ module.exports = withAnimations({
   corePlugins: {
     preflight: false,
   },
-  content: [
-    './src/**/*.{html,ts,scss}',
-    './projects/**/*.{html,ts,scss}',
-    // "./dist/acorex/**/*.{html,ts,scss}",
-    // "./node_modules/@acorex/**/*.{html,ts,js,mjs,scss}",
-  ],
-  darkMode: 'class', // or 'media' or 'class'
+  content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
@@ -119,6 +114,12 @@ module.exports = withAnimations({
         '.animate-faster': {
           animationDuration: '500ms',
         },
+        '.card': {
+          backgroundColor: 'rgb(var(--ax-color-surface))',
+          border: '1px solid',
+          borderColor: 'rgb(var(--ax-color-border-default))',
+          borderRadius: 'var(--ax-rounded-border-default)',
+        },
         '.bg-default': {
           backgroundColor:
             'rgb(var(--ax-color-default-background) / var(--tw-bg-opacity))',