@digital-ai/dot-illustrations 1.0.32 → 2.0.1

package/README.md

@@ -1,5 +1,6 @@
 # dot-illustrations and integrations
-A central place for the design team to keep illustrations all graphical assets and for dev teams to find them.
+
+A central place for the design team to keep illustrations all graphical assets for dev teams to find them.
 
 Files are organized in 2 separate folders 
 - illustrations

package/demo/demo.css

@@ -11,6 +11,11 @@ body {
 }
 
 .search-wrapper {
+  border-radius: 4px;
+  border: #878f9a 1px solid;
+  top: 0;
+  background-color: #fff;
+  z-index: 999;
   display: flex;
   width: 720px;
   height: 48px;
@@ -19,11 +24,6 @@ body {
   gap: 4px;
   padding-left: 12px;
   padding-right: 12px;
-
-  /* new added code */
-  top: 0;
-  background-color: #fff;
-  z-index: 999;
 }
 
 input {
@@ -43,21 +43,21 @@ input {
   align-content: flex-start;
 }
 
-.demo-wrapper>div {
+.demo-wrapper > div {
   z-index: 1;
   display: grid;
   grid-template-rows: 1fr 1fr;
   width: 220px;
-  height: 220px;
+  height: 240px;
   min-width: 220px;
   max-width: 460px;
-  max-height: 460px;
+  max-height: 520px;
   min-height: 220px;
   overflow: hidden;
   background: #fff;
   margin: 16px;
   padding: 24px;
-  border: solid 1px #C1C6CD;
+  border: solid 1px #e1e5eb;
   border-radius: 4px;
   transition: opacity 0.3s ease;
   /* DropShadow/dropshadow-normal */
@@ -65,35 +65,21 @@ input {
   position: relative;
 }
 
-.demo-wrapper>div:hover{
+.demo-wrapper > div:hover {
   opacity: 0.7;
   background: var(--Overlay-colors-default-overlay, #3B485C);
+  z-index: 2;
 }
 
-
 img {
   align-items: center;
-  height: 150px;
-  width: 150px;
-  max-width: 300px;
-  max-height: 300px;
-  min-width: 120px;
-  min-height: 120px;
-  display: flex;
+  height: 160px;
+  width: 160px;
+  max-width: 160px;
+  max-height: 160px;
+  min-width: 92px;
+  min-height: 92px;
   margin: auto;
-  z-index: -1;
-  color: #39404a;
-}
-
-
-
-.container img {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-  -webkit-mask-size: cover;
-  mask-size: cover;
-  z-index: 0;
 }
 
 span {
@@ -102,16 +88,29 @@ span {
   flex-wrap: wrap;
   font-family: 'Lato', sans-serif;
   font-size: 14px;
-  margin-top: 0.5rem;
+  margin-top: 8px;
   text-align: center;
   color: #667385;
   z-index: 0;
 }
 
+
+.copy-container{}
+
+/* Align buttons vertically in the nested div */
+.demo-wrapper .button-group {
+  display: flex;
+  flex-direction: column; /* Stack buttons vertically */
+  align-items: center; /* Center buttons horizontally */
+  gap: 8px; /* Add spacing between the buttons */
+  margin-top: -102px;
+  margin-bottom: 24px;
+}
+
 .button {
+  position: relative; /* Make tooltip positioning relative to button */
   opacity: 0;
   transition: opacity 0.3s ease;
-  transform: translate(-50%, -50%);
   border: solid 1px #667385;
   border-radius: 4px;
   background: #FFF;
@@ -120,17 +119,69 @@ span {
   font-size: 16px;
   padding: 8px 16px;
   z-index: 29;
-  position: absolute; 
-  top: 50%;
-  left: 50%;
 }
 
 .demo-wrapper div:hover .button {
   opacity: 1;
 }
 
-
-.demo-wrapper div:hover img{
+.demo-wrapper div:hover img {
   opacity: 0.5;
 }
 
+.tooltiptext {
+  visibility: hidden;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%; /* Position the tooltip above the button */
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  white-space: nowrap; /* Prevent text wrapping */
+}
+
+.button:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
+
+.codeBlock {
+  visibility: hidden;
+  white-space: pre-wrap; /* Preserve code formatting */
+  background-color: #f4f4f4;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  max-width: 300px; /* Optional: limit code block width */
+  overflow: auto; /* Scroll if content is too wide */
+}
+
+.codeInclude {
+  color: rgb(43, 50, 55);
+  white-space: pre-wrap; /* Preserve code formatting */
+  background-color: #f4f4f4;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  max-width: 300px; /* Optional: limit code block width */
+  overflow: auto; /* Scroll if content is too wide */
+}
+
+/* When dark mode is active */
+body.dark-mode .dot-illustration img.light {
+  display: none;
+}
+
+body.dark-mode .dot-illustration img.dark {
+  display: block;
+  background-color: #232E40;
+  border-radius: 8px;
+
+}