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

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

@@ -36,19 +36,19 @@ export const styles = css`
   .menu-item {
     position: relative;
     display: flex;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
     align-items: stretch;
-    font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: 1rem;
+    font-weight: 400;
     line-height: 1.8;
     letter-spacing: normal;
-    color: var(--nile-colors-primary-900);
+    color: hsl(240 5.3% 26.1%);
     min-height:40px;
     transition: 150ms fill;
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
+    padding:0 var(--nile-spacing-spacing-xl);
   }
 
   .menu-item.menu-item--disabled {
@@ -58,7 +58,7 @@ export const styles = css`
   }
 
   .menu-item .menu-item__label {
-    margin: auto var(--nile-spacing-none);
+    margin: auto 0;
     display: inline-flex;
   }
 
@@ -69,7 +69,7 @@ export const styles = css`
   }
 
   .menu-item .menu-item__prefix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-md);
+    margin-inline-end: 0.5rem;
   }
 
   .menu-item .menu-item__suffix {
@@ -79,7 +79,7 @@ export const styles = css`
   }
 
   .menu-item .menu-item__suffix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-md);
+    margin-inline-start: 0.5rem;
   }
 
   :host(:focus-visible) {
@@ -88,13 +88,13 @@ export const styles = css`
 
   :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
     background-color: var(--nile-colors-neutral-100);
-    color: var(--nile-colors-dark-900);
+    color: hsl(0, 0%, 0%);
   }
 
   :host(:focus-visible) .menu-item {
     outline: none;
-    background-color: var(--nile-colors-blue-500);
-    color: var(--nile-colors-white-base);
+    background-color: hsl(200.4 98% 39.4%);
+    color: hsl(0, 0%, 100%);
     opacity: 1;
   }
 

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

@@ -24,28 +24,28 @@ export const styles = css`
     position: relative;
     display: flex;
     align-items: center;
-    font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: 1rem;
+    font-weight: 400;
     line-height: 1.8;
     letter-spacing: normal;
-    color: var(--nile-colors-primary-900);
-    padding: var(--nile-spacing-sm) var(--nile-spacing-none);
+    color: hsl(240 5.3% 26.1%);
+    padding: 6px 0;
     transition: 150ms fill;
     cursor: pointer;
   }
 
   .option--single-select {
-    padding: var(--nile-spacing-md) var(--nile-spacing-lg);
+    padding: 9px 12px;
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--nile-colors-primary-100);
-    color: var(--nile-colors-dark-900);
+    background-color: rgba(0, 94, 166, 0.1);
+    color: hsl(0, 0%, 0%);
   }
 
   .option--current,
   .option--current.option--disabled {
-    background-color: var(--nile-colors-primary-100);
+    background-color: rgba(0, 94, 166, 0.1);
     color: var(--nile-colors-primary-600);
     opacity: 1;
   }
@@ -69,7 +69,7 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     visibility: hidden;
-    padding-inline-end: var(--nile-spacing-xs);
+    padding-inline-end: 0.25rem;
   }
 
   .option--selected .option__check {
@@ -84,17 +84,17 @@ export const styles = css`
   }
 
   .option__prefix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-md);
+    margin-inline-end: 0.5rem;
   }
 
   .option__suffix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-md);
+    margin-inline-start: 0.5rem;
   }
 
   .option--checkbox{
     pointer-events: none;
-    margin-left: var(--nile-spacing-lg);
-    margin-right: var(--nile-spacing-lg);
+    margin-left: 12px;
+    margin-right: 12px;
     width:auto;
   }
 

package/src/nile-page-header/nile-page-header.css.ts

@@ -40,7 +40,7 @@ export const styles = css`
     font-style: normal;
     font-weight: var(--nile-page-header-subheading-font-weight);
     line-height: var(--nile-page-header-subheading-line-height);
-    margin-top: var(--nile-spacing-xs);
+    margin-top: 3px;
   }
 
   [hidden] {

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

@@ -21,8 +21,8 @@ export const styles = css`
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-4);
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 500;
+    line-height: var(--nile-type-scale-4);
     letter-spacing: 0.2px;
   }
 
@@ -31,11 +31,11 @@ export const styles = css`
     flex-direction: column;
     height: auto;
     min-width: 352px;
-    gap: var(--nile-spacing-xl);
-    padding: var(--nile-spacing-xl);
-    border-radius: var(--nile-radius-sm);
+    gap: var(--nile-type-scale-4);
+    padding: var(--nile-type-scale-4);
+    border-radius: var(--nile-radius-base-standard);
     background-color: var(--nile-colors-white-base);
-    border: solid 1px var(--nile-colors-dark-200);
+    border: solid 1px hsl(240 5.9% 90%);
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
       0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }

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

@@ -12,7 +12,7 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --arrow-color: var(--nile-colors-dark-200);
+    --arrow-color: hsl(240 4.8% 95.9%);
     --arrow-size: 6px;
 
     /*
@@ -51,7 +51,7 @@ export const styles = css`
     background: var(--arrow-color);
     z-index: -1;
     /* Added border and box-shadow to arrow */
-    border: solid 1px var(--nile-colors-dark-200);
+    border: solid 1px hsl(240 5.9% 90%);
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
       0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }

package/src/nile-progress-bar/nile-progress-bar.css.ts

@@ -3,14 +3,14 @@ import { css } from 'lit';
 export default css`
   .nile-progress-bar__container {
     width: 100%;
-    margin: var(--nile-spacing-none) auto;
+    margin: 0 auto;
   }
 
   .nile-progress-bar__progress-bar {
     width: 100%;
     counter-reset: step;
-    padding: var(--nile-spacing-none);
-    margin: var(--nile-spacing-none) auto;
+    padding: 0;
+    margin: 0 auto;
     list-style: none;
     display: flex;
     height: 6px;
@@ -24,7 +24,7 @@ export default css`
     height: 6px;
     background-color: var(--nile-progress-bar-track-color-stroke);
     transition: stroke-dashoffset 0.8s ease-in-out;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;  
     overflow: hidden;
   }
 
@@ -41,17 +41,17 @@ export default css`
     background-color: var(--nile-progress-bar-progress-color-stroke);
     height: 100%;
     transition: all 1s linear;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;  
   }
 
   .nile-progress-bar__progress-bar.lg li span {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
   }
 
   .nile-progress-bar__reset {
     background-color: var(--nile-progress-bar-track-color-stroke);
     position: absolute;
     z-index: 1;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px; 
   }
 `;

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

@@ -22,25 +22,25 @@ export const styles = css`
   .radio {
     display: inline-flex;
     align-items: top;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-medium);
+    font-size: 14px;
+    font-weight: 500;
     color: var(--nile-colors-dark-900);
     vertical-align: middle;
     cursor: pointer;
-    margin: var(--nile-spacing-lg) var(--nile-spacing-none);
+    margin: 10px 0;
     align-items: center;
   }
 
   .radio--medium {
     --toggle-size: 14px;
-    font-size: var(--nile-type-scale-3)
+    font-size: 14px;
   }
 
   .radio__checked-icon {
     display: inline-flex;
     width: var(--nile-radio-inner-width);
     height: var(--nile-radio-inner-width);
-    border-radius: var(--nile-radius-full);
+    border-radius: 50%;
     background: var(--nile-radio-checked-icon-background);
   }
 
@@ -53,7 +53,7 @@ export const styles = css`
     width: var(--nile-radio-outer-width);
     height: var(--nile-radio-outer-height);
     border: solid 1px var(--nile-radio-outer-border-color);
-    border-radius: var(--nile-radius-full);
+    border-radius: 50%;
     background-color: var(--nile-radio-outer-background-color);
     color: transparent;
     transition: var(--nile-transition-duration-default) border-color,
@@ -65,8 +65,8 @@ export const styles = css`
   .radio__input {
     position: absolute;
     opacity: 0;
-    padding: var(--nile-spacing-none);
-    margin: var(--nile-spacing-none);
+    padding: 0;
+    margin: 0;
     pointer-events: none;
   }
 
@@ -111,7 +111,7 @@ export const styles = css`
   }
 
   .radio--disabled .radio__control {
-    background-color:var(--nile-colors-neutral-100);
+    background-color:var(--nile-colors-neutral-100)F9FAFB;
     border: 1px solid var(--nile-colors-neutral-500);
   }
 
@@ -124,14 +124,14 @@ export const styles = css`
     display: inline-block;
     color: var(--nile-colors-dark-900);
     line-height: var(--nile-type-scale-3);
-    margin-inline-start: var(--nile-spacing-md);
+    margin-inline-start: 0.5em;
     user-select: none;
     font-size: var(--nile-type-scale-3);
-    margin-top: var(--nile-spacing-xxs);
+    margin-top: 2px;
   }
   .radio__label_border {
-    padding: var(--nile-spacing-lg);
-    border-radius: var(--nile-radius-sm);
+    padding: 0.75rem;
+    border-radius: 4px;
     border: 1px solid var(--Neutral-Normal, var(--nile-colors-neutral-400));
   }
 `;

package/src/nile-radio-group/nile-radio-group.css.ts

@@ -8,23 +8,24 @@ export default css`
 
   .form-control--inline-radio ::slotted(nile-radio) {
     display: inline-block;
-    margin-right: var(--nile-spacing-2xl);
+    margin-right: 24px;
   }
 
   .form-control {
     border: none;
-    padding: var(--nile-spacing-none);
-    margin: var(--nile-spacing-none);
+    padding: 0;
+    margin: 0;
   }
 
   .form-control__label {
-    padding: var(--nile-spacing-none);
-    font-size: var(--nile-type-scale-3);
+    padding: 0;
+    font-size: 14px;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-serif);
+    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: 14px;
     letter-spacing: 0.2px;
   }
 
@@ -37,7 +38,7 @@ export default css`
     position: absolute;
     width: 1px;
     height: 1px;
-    padding: var(--nile-spacing-none);
+    padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);

package/src/nile-section-message/nile-section-message.css.ts

@@ -22,13 +22,13 @@ export const styles = css`
   .parent__wrapper {
     width: auto;
     display: flex;
-    gap: var(--nile-spacing-lg);
+    gap: 10px;
     box-sizing: border-box;
     padding: var(--nile-type-scale-4);
     word-wrap: break-word;
     align-items: center;
     border: none;
-    border-radius: var(--nile-spacing-xs);
+    border-radius: var(--nile-spacing-one-half-x);
   }
 
   .section--primary {
@@ -85,7 +85,7 @@ export const styles = css`
     flex-direction: column;
     justify-content: flex-start;
     width: 100%;
-    gap: var(--nile-spacing-lg);
+    gap: 10px;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-sans-serif);
     font-size: var(--nile-type-scale-3);
@@ -104,7 +104,7 @@ export const styles = css`
 
   .footer__actions {
     display: flex;
-    gap: var(--nile-spacing-md);
+    gap: 10px;
     color: var(--nile-colors-primary-600);
     font-weight: var(--nile-font-weight-regular);
     cursor: pointer;
@@ -113,7 +113,7 @@ export const styles = css`
   ::slotted([slot='footer__actions']:not(:last-child))::after {
     content: '•';
     color: var(--nile-section-message-footer-color);
-    margin-left: var(--nile-spacing-md);
+    margin-left: 8px;
   }
 `;
 

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

@@ -36,18 +36,18 @@ export const styles = css`
   /* Label */
   .form-control--has-label .form-control__label {
     display: block;
-    margin-bottom: var(--nile-spacing-sm);
+    margin-bottom: 6px;
     color: var(--nile-colors-dark-900);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-family: Colfax-regular;
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-small);
+    font-weight: 400;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
@@ -60,16 +60,16 @@ export const styles = css`
   .form-control--has-help-text .form-control__help-text {
     display: block;
     color: var(--nile-colors-dark-500);
-    margin-top: var(--nile-spacing-lg);
+    margin-top: 0.75rem;
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--nile-type-scale-3);
+    font-size: 0.875rem;
   }
 
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
-    margin-top: var(--nile-spacing-xs);
+    margin-top: 0.25rem;
   }
 
   :host {
@@ -107,7 +107,7 @@ export const styles = css`
     align-items: center;
     justify-content: start;
     font-family: var(--nile-font-family-sans-serif);
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: 400;
     letter-spacing: normal;
     vertical-align: middle;
     overflow: hidden;
@@ -125,8 +125,8 @@ export const styles = css`
     color: var(--nile-colors-dark-900);
     cursor: inherit;
     overflow: hidden;
-    padding: var(--nile-spacing-none);
-    margin: var(--nile-spacing-none);
+    padding: 0;
+    margin: 0;
     -webkit-appearance: none;
     font-family: var(--nile-font-family-serif);
   }
@@ -160,8 +160,8 @@ export const styles = css`
     left: 0;
     width: 100%;
     height: 100%;
-    padding: var(--nile-spacing-none);
-    margin: var(--nile-spacing-none);
+    padding: 0;
+    margin: 0;
     opacity: 0;
     z-index: -1;
   }
@@ -171,24 +171,24 @@ export const styles = css`
     flex: 1;
     align-items: center;
     flex-wrap: no-wrap;
-    margin-inline-start: var(--nile-spacing-md);
+    margin-inline-start: 0.5rem;
     width: 100%;
     overflow: hidden;
   }
 
   .select__tags-count {
     color: var(--nile-colors-primary-600);
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-family: Colfax-regular;
+    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: 14px;
     letter-spacing: 0.2px;
-    margin: var(--nile-spacing-sm);
+    margin: 6px;
   }
 
   .select__tags-count-clearable {
-    margin-right: var(--nile-spacing-5xl);
+    margin-right: 50px;
   }
 
   .select__tags::slotted(nile-tag) {
@@ -261,37 +261,37 @@ export const styles = css`
   }
 
   .select--medium .select__combobox {
-    border-radius: var(--nile-radius-sm);
-    font-size: var(--nile-type-scale-3);
-    padding: var(--nile-spacing-lg);
+    border-radius: 4px;
+    font-size: 14px;
+    padding: 12px;
     height: 40px;
     box-sizing: border-box;
   }
 
   .select--medium .select__clear {
-    margin-inline-start: var(--nile-spacing-lg);
+    margin-inline-start: 0.75rem;
   }
 
   .select--medium .select__prefix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg);
+    margin-inline-end: 0.75rem;
   }
 
   .select--medium .select__prefix.multiple::slotted(*) {
-    margin-inline-start: var(--nile-spacing-lg);
+    margin-inline-start: 0.75rem;
   }
 
   .select--medium.select--multiple:not(.select--placeholder-visible)
     .select__combobox {
-    padding-inline-start: var(--nile-spacing-none);
+    padding-inline-start: 0;
   }
 
   .select--medium .select__tags {
-    gap: var(--nile-spacing-sm);
+    gap: 3px;
   }
 
   /* Pills */
   .select--pill.select--medium .select__combobox {
-    border-radius: var(--nile-radius-3xl);
+    border-radius: 2.5rem;
   }
 
   /* Prefix */
@@ -318,7 +318,7 @@ export const styles = css`
     color: var(--nile-colors-primary-600);
     border: none;
     background: none;
-    padding: var(--nile-spacing-none);
+    padding: 0;
     transition: 150ms color;
     cursor: pointer;
   }
@@ -338,7 +338,7 @@ export const styles = css`
     align-items: center;
     transition: 250ms rotate ease;
     rotate: 0;
-    margin-inline-start: var(--nile-spacing-xs);
+    margin-inline-start: 0.25rem;
   }
 
   .select--open .select__expand-icon {
@@ -349,13 +349,13 @@ export const styles = css`
   .select__listbox {
     display: block;
     position: relative;
-    font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: 1rem;
+    font-weight: 400;
     background: var(--nile-colors-white-base);
     border: solid 1px var(--nile-colors-neutral-500);
-    border-radius: var(--nile-radius-sm);
-    padding-block: var(--nile-spacing-none);
-    padding-inline: var(--nile-spacing-none);
+    border-radius: 0.25rem;
+    padding-block: 0;
+    padding-inline: 0;
     overflow: auto;
     overscroll-behavior: none;
     /* Make sure it adheres to the popup's auto size */
@@ -364,24 +364,24 @@ export const styles = css`
   }
 
   .select__options__search-enabled {
-    padding-top: var(--nile-spacing-lg);
+    padding-top: 10px;
   }
 
   .select__options {
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     color: rgb(133, 129, 129);
   }
 
   .select__listbox::slotted(nile-divider) {
-    --spacing: var(--nile-spacing-xs);
+    --spacing: 0.25rem;
   }
 
   .select__listbox::slotted(small) {
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-size: 0.875rem;
+    font-weight: 600;
     color: var(--nile-colors-dark-500);
-    padding-block: var(--nile-spacing-xs);
-    padding-inline: var(--nile-spacing-xl);
+    padding-block: 0.25rem;
+    padding-inline: 1rem;
   }
 
   .select__search {
@@ -389,8 +389,8 @@ export const styles = css`
     top: 0px;
     z-index: 1;
     width: calc(100% - 16px);
-    padding: var(--nile-spacing-md);
-    background-color: var(--nile-colors-white-base);
+    padding: 8px;
+    background-color: white;
     margin-bottom: -8px;
   }
 
@@ -405,8 +405,8 @@ export const styles = css`
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: var(--nile-spacing-md) var(--nile-spacing-lg) var(--nile-spacing-xl);
-    gap: var(--nile-spacing-lg);
+    padding: 8px 12px 16px;
+    gap: 12px;
     justify-content: space-between;
   }
 
@@ -427,12 +427,12 @@ export const styles = css`
   }
 
   .select__loader--icon {
-    margin-top: var(--nile-spacing-xl);
+    margin-top: 20px;
     animation: spin 0.6s linear infinite;
   }
 
   .select__no-results {
-    padding: var(--nile-spacing-lg);
+    padding: 10px;
   }
 
   @keyframes spin {
@@ -449,7 +449,7 @@ export const styles = css`
   }
 
   .select__prefix--from-options {
-    margin-inline-end: var(--nile-spacing-lg);
+    margin-inline-end: 12px;
   }
   
   .select__hide-default{