@aquera/nile-elements 0.1.35-beta-1.7 → 0.1.35-beta-1.8

package/src/nile-toast/nile-toast.css.ts

@@ -15,7 +15,7 @@ export const styles = css`
     display: contents;
 
     /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: var(--nile-spacing-none);
+    margin: 0;
   }
 
   .alert {
@@ -25,10 +25,10 @@ export const styles = css`
     display: flex;
     align-items: flex-start;
     border: solid 2px 2px;
-    border-radius: var(--nile-radius-md);
+    border-radius: 8px;
     margin: inherit;
-    padding: var(--nile-spacing-xl);
-    gap: var(--nile-spacing-xl);
+    padding: 16px;
+    gap: 16px;
     width: max-content;
     min-width: 400px;
   }
@@ -39,8 +39,8 @@ export const styles = css`
   }
 
   .alert__prefix-icon-container {
-    background-color: var(--nile-colors-red-500);
-    border-radius: var(--nile-radius-sm);
+    background-color: red;
+    border-radius: 4px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
@@ -51,7 +51,7 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--nile-type-scale-1);
+    font-size: 10px;
   }
 
   .alert--success {
@@ -122,22 +122,24 @@ export const styles = css`
     flex-direction: column;
     align-items: flex-start;
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
-    color: var(--nile-colors-dark-900);
-    gap: var(--nile-spacing-sm);
+    font-size: 14px;
+    line-height: 20px;
+    color: black;
+    gap:3px;
   }
 
   .alert__message--title {
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-weight: 600;
     color:var(--nile-colors-dark-900);
   }
 
   .alert__message--content {
-    font-weight:var(--nile-font-weight-regular);
+    font-weight:400;
     color:var(--nile-colors-dark-500);
   }
 
   .alert__message--content-only {
+    margin-top: 3px;
   }
 
   .alert__close-button {
@@ -149,14 +151,14 @@ export const styles = css`
   .alert__tags {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--nile-spacing-lg);
-    margin-top: var(--nile-spacing-xs);
+    gap: 10px;
+    margin-top: 4px;
   }
 
   .alert__tag {
     height: 24px;
     display: flex;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
     border: 1px solid var(--nile-colors-neutral-400);
     background: var(--nile-colors-white-base);
   }
@@ -166,26 +168,26 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--nile-spacing-none) var(--nile-spacing-sm);
+    padding: 0 6px;
 
     color: var(--nile-colors-dark-900);
     font-family:  var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
   .alert__tag-image {
     height: 24px;
     width: 24px;
-    border-radius: var(--nile-radius-radius-xs) var(--nile-radius-radius-none) var(--nile-radius-radius-none) var(--nile-radius-radius-xs);
+    border-radius: 4px 0 0 4px;
   }
 
   .alert__prefix-img {
     height: 24px;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
   }
 
   .alert--no-content{

package/src/nile-tooltip/nile-tooltip.css.ts

@@ -20,12 +20,12 @@ export const styles = css`
     .tooltip {
       position: fixed;
       z-index: 1000;
-      background-color: var(--nile-tooltip-color-background);
-      color: var(--nile-colors-white-base);
-      padding: var(--nile-spacing-lg);
-      border-radius: var(--nile-radius-sm);
-      font-size: var(--nile-tooltip-font-size-sm);
-      line-height: var(--nile-tooltip-line-height-sm);
+      background-color: var(--nile-tooltip-color-background, #333);
+      color: var(--nile-colors-white-base, #fff);
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: var(--nile-tooltip-font-size-sm, 14px);
+      line-height: var(--nile-tooltip-line-height-sm, 1.5);
       opacity: 0;
       transition: opacity 0.2s, transform 0.2s;
       pointer-events: none;

package/src/nile-tree/nile-tree.css.ts

@@ -34,7 +34,7 @@ export const styles = css`
     --indent-guide-offset: 0;
     --indent-guide-style: solid;
     --indent-guide-width: 0;
-    --indent-size: var(--nile-spacing-2xl);
+    --indent-size: 1.25rem;
 
     display: block;
     isolation: isolate;

package/src/nile-tree-item/nile-tree-item.css.ts

@@ -36,7 +36,7 @@ export const styles = css`
   }
 
   slot:not([name])::slotted(nile-icon) {
-    margin-inline-end: var(--nile-spacing-md);
+    margin-inline-end: 0.5rem;
   }
 
   .tree-item {
@@ -57,8 +57,8 @@ export const styles = css`
   .tree-item__checkbox,
   .tree-item__label {
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: 16px;
+    font-weight: 400;
   }
 
   .tree-item__checkbox::part(base) {
@@ -78,7 +78,7 @@ export const styles = css`
     justify-content: center;
     box-sizing: content-box;
     color: var(--nile-colors-neutral-500);
-    padding: var(--nile-spacing-md);
+    padding: 0.5rem;
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;

package/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts

@@ -27,24 +27,24 @@ export const styles = css`
 
 	.stepper__item--sm {
 		--item-spacing: var(--nile-spacing-spacing-md);
-		--stepper-item-title-size: var(--nile-type-scale-2);
-		--stepper-item-subtitle-size: var(--nile-type-scale-1);
+		--stepper-item-title-size:12px;
+		--stepper-item-subtitle-size:10.24px;
 		--stepper-item-text-line-height:16px;
 		--circle-height:18px;
 	}
 
 	.stepper__item--lg {
 		--item-spacing: var(--nile-spacing-spacing-md);
-		--stepper-item-title-size: var(--nile-type-scale-3);
-		--stepper-item-subtitle-size: var(--nile-type-scale-2);
+		--stepper-item-title-size:14px;
+		--stepper-item-subtitle-size:12px;
 		--stepper-item-text-line-height:18px;
 		--circle-height:22px;
 	}
 
 	.stepper__item--xl {
 		--item-spacing: var(--nile-spacing-spacing-lg);
-		--stepper-item-title-size: var(--nile-type-scale-4);
-		--stepper-item-subtitle-size: var(--nile-type-scale-3);
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:24px;
 		--circle-height:26px;
 	}
@@ -120,7 +120,7 @@ export const styles = css`
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var(--nile-font-family-medium);
-		font-weight: var(--nile-font-weight-regular);
+		font-weight: 400;
 	}
 
 	.stepper__content__title--alone{
@@ -133,7 +133,7 @@ export const styles = css`
 
 	.stepper__content__title--active{
 		color:var(--nile-colors-primary-600);
-		font-weight: var(--nile-font-weight-semi-bold);
+		font-weight: 600;
 	}
 
 	.stepper__content__subtitle {
@@ -141,7 +141,7 @@ export const styles = css`
 		font-size: var(--stepper-item-subtitle-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var( --nile-font-family-sans-serif);
-		font-weight: var(--nile-font-weight-regular);
+		font-weight: 400;
 	}
 
 	.stepper__content__subtitle--active{
@@ -149,4 +149,4 @@ export const styles = css`
 	}
 `;
 
-export default [styles];
+export default [styles];