diff --git a/src/components/toolbars/triangle/readme.md b/src/components/toolbars/triangle/readme.md
index b57b9de..0c454d8 100644
--- a/src/components/toolbars/triangle/readme.md
+++ b/src/components/toolbars/triangle/readme.md
@@ -10,11 +10,10 @@
 
 ## CSS Custom Properties
 
-| Name                           | Description                                           |
-| ------------------------------ | ----------------------------------------------------- |
-| `--stylo-triangle-background`  | The background-color of the triangle @default --white |
-| `--stylo-triangle-drop-shadow` | drop-shaddow of the triangle @default 2               |
-| `--stylo-triangle-width`       | The width of the triangle @default 2                  |
+| Name                           | Description                             |
+| ------------------------------ | --------------------------------------- |
+| `--stylo-triangle-drop-shadow` | drop-shadow of the triangle             |
+| `--stylo-triangle-width`       | The width of the triangle @default 22px |
 
 ## Dependencies
 
diff --git a/src/components/toolbars/triangle/triangle.scss b/src/components/toolbars/triangle/triangle.scss
index 3c70fd6..c713e72 100644
--- a/src/components/toolbars/triangle/triangle.scss
+++ b/src/components/toolbars/triangle/triangle.scss
@@ -1,9 +1,7 @@
-@use "../../../themes/overlay";
-
 :host(.top) {
   div.triangle {
     bottom: unset;
-    top: 0px;
+    top: 0;
     transform: rotate(180deg) translate(50%, 100%);
   }
 }
@@ -11,30 +9,27 @@
 div.triangle {
   z-index: 1;
 
+  /**
+   * @prop --stylo-triangle-width: The width of the triangle
+   * @default 22px
+   */
+  --triangle-width: var(--stylo-triangle-width, 22px);
+
   position: absolute;
   width: 0;
   height: 0;
-  bottom: 0px;
-  left: max(var(--stylo-toolbar-triangle-start), calc(var(--stylo-triangle-width, 40px) / 2));
+  bottom: 0;
+  left: var(--stylo-toolbar-triangle-start);
+  transform: translate(-50%, 100%);
 
   background: transparent;
-  /**
-   * @prop --stylo-triangle-width: The width of the triangle
-   * @default 2
-   */
-  /**
-   * @prop --stylo-triangle-background: The background-color of the triangle
-   * @default --white
-   */
-  border-left: calc(var(--stylo-triangle-width, 24px) / 2) solid transparent;
-  border-right: calc(var(--stylo-triangle-width, 24px) / 2) solid transparent;
-  border-top: calc(var(--stylo-triangle-width, 24px) / 2) solid
-    var(--stylo-triangle-background, --white);
-  transform: translate(-50%, 100%);
+
+  border-left: calc(var(--triangle-width) / 2) solid transparent;
+  border-right: calc(var(--triangle-width) / 2) solid transparent;
+  border-top: calc(var(--triangle-width) / 2) solid var(--stylo-background, var(--white));
 
   /**
-   * @prop --stylo-triangle-drop-shadow: drop-shaddow of the triangle
-   * @default 2
+   * @prop --stylo-triangle-drop-shadow: drop-shadow of the triangle
    */
   filter: drop-shadow(var(--stylo-triangle-drop-shadow));
 }
diff --git a/src/index.html b/src/index.html
index 3584cf3..a899331 100644
--- a/src/index.html
+++ b/src/index.html
@@ -69,9 +69,6 @@
         --stylo-toolbar-button-color-active: var(--highlight);
         --stylo-list-background-active: rgba(var(--highlight-rgb), 0.2);
         --stylo-toolbar-border-radius: 0;
-
-        --stylo-triangle-background: var(--highlight-contrast);
-        --stylo-triangle-width: 22px;
         --stylo-triangle-drop-shadow: 0px 1px 0px var(--highlight);
       }