@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

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

@@ -13,30 +13,6 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: block;
-    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);
-    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);
-    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;
-    --ng-box-shadow-1: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
-  }
-
-
-  /* To Hide Safari's AutoFill icon */
-  input::-webkit-contacts-auto-fill-button {
-    visibility: hidden;
-    width: 0;
-    margin: var(--nile-spacing-none);
-    padding: var(--nile-spacing-none);
-  }
-
-  /* To Hide Safari's AutoFill icon */
-  input::-webkit-contacts-auto-fill-button {
-    visibility: hidden;
-    width: 0;
-    margin: 0;
-    padding: 0;
   }
 
   /* To Hide Safari's AutoFill icon */
@@ -59,51 +35,51 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    margin-bottom: 6px;
+    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-medium, var(--ng-font-weight-medium));
-    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm));
+    font-weight: 500;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-size: 14px;
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));
+    color: var(--nile-colors-red-700);
   }
 
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
     color: var(--nile-colors-dark-500);
-    margin-top: var(--nile-spacing-sm);
+    margin-top: 6px;
   }
 
   /* Error message */
   .form-control__error-message {
     display: block;
-    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
-    margin-top: var(--nile-spacing-lg, var(--ng-spacing-sm));
-    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-red-700);
+    margin-top: 12px;
+    font-size: 12px;
     font-style: normal;
-    line-height: var( --nile-form-error-text-line-height,  var(--ng-line-height-text-sm));
+    line-height: 12px;
     letter-spacing: 0.2px;
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--nile-type-scale-1);
+    font-size: 10.24px;
   }
 
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
-    margin-top: var(--nile-spacing-xxxsmall);
+    margin-top: 0.25rem;
   }
 
   .input {
@@ -113,104 +89,68 @@ export const styles = css`
     justify-content: start;
     position: relative;
     width: 100%;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    font-weight: 400;
     vertical-align: middle;
     overflow: hidden;
     cursor: text;
     transition: 150ms color, 150ms border, 150ms box-shadow,
-      150ms background-color, 150ms outline;
+      150ms background-color;
     box-sizing: border-box;
     color: var(--nile-colors-dark-900);
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3);
+    font-family: Colfax-regular;
+    font-size: 14px;
     font-style: normal;
     line-height: 14px;
     letter-spacing: 0.2px;
   }
 
-
   /* Standard inputs */
   .input--standard {
-    background-color: var(--nile-input-standard-background-color, var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-input-standard-border-color, var(--ng-colors-border-primary));
-    box-shadow: var(--nile-input-shadow-standard, var(--ng-shadow-xs));
-    outline:var(--nile-outline-none, var(--ng-private-outline-transparent));
+    background-color: var(--nile-input-standard-background-color);
+    border: solid 1px var(--nile-input-standard-border-color);
+    box-shadow: var(--nile-input-shadow-standard);
   }
 
-  .input--standard:hover {
-    border-color: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400));
-  }
-
-  .input--standard.input--error:hover:not(.input--disabled) {
-    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));
+  .input--standard:hover:not(.input--disabled) {
+    background-color: hsl(0, 0%, 100%);
+    border-color: var(--nile-colors-dark-900);
   }
 
   .input--standard.input--focused:not(.input--disabled) {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));
-    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
-    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));
-  }
-
-  .input--standard.input--focused.input--warning:not(.input--disabled) {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));
-    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
-    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));
-  }
-
-  .input--standard.input--focused.input--success:not(.input--disabled) {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));
-    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
-    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));
-  }
-  
-  .input--standard.input--focused.input--error:not(.input--disabled) {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));
-    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
-    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));
+    background-color: hsl(0, 0%, 100%);
+    border-color: var(--nile-colors-primary-500);
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled);
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--nile-colors-primary-900);
+    color: hsl(240 5.3% 26.1%);
   }
 
   .input--standard.input--disabled {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));
-    border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));
-
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-500);
     opacity: 0.5;
     cursor: not-allowed;
   }
 
   .input--standard.input--disabled .input__control {
-    color:  var(--nile-color-dark-blue, var(--ng-colors-text-disabled));
+    color: hsl(240 5.9% 10%);
   }
 
   .input--standard.input--disabled .input__control::placeholder {
-    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));
+    color: var(--nile-input-standard-disabled-placeholder-font-color);
   }
 
   .input--standard.input--warning {
-    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));
-  }
-
-  .input--standard.input--warning:hover {
-    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));
+    border-color: var(--nile-colors-yellow-500);
   }
 
   .input--standard.input--error {
-    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));
+    border-color: var(--nile-colors-red-500);
   }
 
   .input--standard.input--success {
-    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));
-  }
-
-  .input--standard.input--success:hover {
-    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));
+    border-color: var(--nile-colors-green-500);
   }
 
   .input--standard.input--destructive {
@@ -257,16 +197,16 @@ export const styles = css`
     border: none;
     background: none;
     box-shadow: none;
-    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-lg));
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    padding: 0;
+    margin: 0;
     cursor: inherit;
     -webkit-appearance: none;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
-    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    color: var(--nile-colors-dark-900);
+    font-family: var(--nile-font-family-sans-serif);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));
+    font-weight: 400;
+    line-height: 16px;
     letter-spacing: 0.2px;
   }
 
@@ -278,25 +218,25 @@ export const styles = css`
   }
 
   .input__control:-webkit-autofill {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:hover {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:focus {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
 
   .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 3.125rem var(--nile-colors-white-base, var(--ng-colors-bg-primary)) inset !important;
+    box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;
     /* -webkit-text-fill-color: hsl(198.6 88.7% 48.4%); */
     caret-color: hsl(240 5.3% 26.1%);
   }
@@ -318,7 +258,7 @@ export const styles = css`
   }
 
   .input__control::placeholder {
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-placeholder));
+    color: var(--nile-colors-neutral-700);
     user-select: none;
   }
 
@@ -339,17 +279,17 @@ export const styles = css`
   }
 
   .input__prefix::slotted(nile-icon) {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
   }
 
   .input__suffix::slotted(nile-icon) {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
   }
 
   .input--standard:focus {
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    border-radius: 4px;
     border: 1px solid var(--nile-colors-primary-500);
-    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   /*
@@ -357,14 +297,14 @@ export const styles = css`
    */
 
   .input--small {
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    border-radius: 0.25rem;
     font-size: var(--nile-input-font-size-small);
     height: 1.875rem;
   }
 
   .input--small .input__control {
     height: calc(1.875rem);
-    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));
+    padding: 0 0.75rem;
   }
 
   .input--small .input__clear {
@@ -376,22 +316,22 @@ export const styles = css`
   }
 
   .input--small .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));
+    margin-inline-start: 0.75rem;
   }
 
   .input--small .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));
+    margin-inline-end: 0.75rem;
   }
 
   .input--medium {
-    font-size: var(--nile-font-size-rem-large);
-    height: var(--nile-height-40px, var(--ng-height-auto));
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    border-radius: 0.25rem;
+    font-size: var(--nile-input-font-size-medium);
+    height: 40px;
   }
 
   .input--medium .input__control {
-    height: var(--nile-type-scale-3, var(--ng-height-auto));
-    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    height: 14px;
+    padding: 12px;
   }
 
   .input--medium .input__clear {
@@ -403,22 +343,22 @@ export const styles = css`
   }
 
   .input--medium .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-inline-start: 12px;
   }
 
   .input--medium .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-inline-end: 12px;
   }
 
   .input--large {
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    font-size: var(--nile-type-scale-6);
+    border-radius: 0.25rem;
+    font-size: 1.25rem;
     height: 3.125rem;
   }
 
   .input--large .input__control {
     height: calc(3.125rem - 1px * 2);
-    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
+    padding: 0 1.25rem;
   }
 
   .input--large .input__clear {
@@ -430,11 +370,11 @@ export const styles = css`
   }
 
   .input--large .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-small, var(--ng-spacing-lg));
+    margin-inline-start: 1.25rem;
   }
 
   .input--large .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));
+    margin-inline-end: 1.25rem;
   }
 
   /*
@@ -442,15 +382,15 @@ export const styles = css`
    */
 
   .input--pill.input--small {
-    border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));
+    border-radius: 1.875rem;
   }
 
   .input--pill.input--medium {
-    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));
+    border-radius: 2.5rem;
   }
 
   .input--pill.input--large {
-    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));
+    border-radius: 3.125rem;
   }
 
   /*
@@ -462,10 +402,10 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
     border: none;
     background: none;
-    padding: var(--nile-spacing-none);
+    padding: 0;
     transition: 150ms color;
     cursor: pointer;
   }
@@ -475,20 +415,20 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 3.8% 46.1%);
     border: none;
     background: none;
-    padding: var(--nile-spacing-none);
+    padding: 0;
     transition: 150ms color;
     cursor: pointer;
   }
 
   .input__clear:hover {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 5.2% 33.9%);
   }
 
   .input__password-toggle:hover {
-    color: var(--nile-colors-neutral-700);
+    color: hsl(240 5.2% 33.9%);
   }
 
   .input__clear:focus,
@@ -521,10 +461,6 @@ export const styles = css`
     box-shadow: 0 0 0 0;
   }
 
-  :host([no-outline]) .input--standard {
-    outline: var(--nile-outline-unset, var(--ng-outline-none));
-  }
-
   :host([no-border]) .input--standard:hover:not(.input--disabled) {
     border: none;
     box-shadow: 0 0 0 0;
@@ -541,36 +477,36 @@ export const styles = css`
   }
 
   .input__password {
-    font-family: var(--nile-font-family-disc, var(--ng-font-family-body));
-    letter-spacing: var(--nile-spacing-xxs, var(--ng-spacing-none));
+    font-family: 'disc';
+    letter-spacing: 2px;
   }
 
   .input__non-printable {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
     max-width: 400px;
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    background-color: var(--nile-colors-white-base);
     border: 1px solid var(--nile-colors-red-500);
     color: var(--nile-colors-red-500);
-    padding: var(--nile-spacing-10px);
-    font-size: var(--nile-type-scale-2);
+    padding: 10px;
+    font-size: 12px;
     max-height: 300px;
     overflow-y: scroll;
-    line-height: var(--nile-type-scale-4);
+    line-height: 16px;
   }
 
   .input__remove-non-printable {
     color: var(--nile-colors-red-500);
-    margin-left: var(--nile-spacing-10px);
-    font-size: var(--nile-type-scale-3);
+    margin-left: 10px;
+    font-size: 14px;
     color: var(--nile-colors-dark-900);
     cursor: pointer;
   }
 
   .input__srtiked-text-container {
-    margin-top: var(--nile-spacing-xs);
+    margin-top: 4px;
     color: var(--nile-colors-dark-900);
     word-break: break-all;
-    line-height: var(--nile-type-scale-4);
+    line-height: 16px;
   }
 
   .input__srtiked-text {

package/src/nile-input/nile-input.ts

@@ -179,7 +179,7 @@ export class NileInput extends NileElement implements NileFormControl {
   @property() autocomplete: string = 'off';
 
   /** Indicates that the input should receive focus on page load. */
-  @property({ type: Boolean, attribute: true, reflect: true }) autofocus: boolean;
+  @property({ type: Boolean }) autofocus: boolean;
 
   /** Used to customize the label or icon of the Enter key on virtual keyboards. */
   @property() enterkeyhint:
@@ -227,10 +227,6 @@ export class NileInput extends NileElement implements NileFormControl {
 
   @state() markedValue: string;
 
-  @property() noOutline: any = false;
-
-  @property() noPadding: any = false;
-
   connectedCallback() {
     super.connectedCallback();
     this.emit('nile-init');
@@ -505,10 +501,6 @@ export class NileInput extends NileElement implements NileFormControl {
     this.formControlController.updateValidity();
   }
 
-  public inputFocus() {
-    this.input.focus();
-  }
-
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
@@ -631,7 +623,7 @@ export class NileInput extends NileElement implements NileFormControl {
                       tabindex="-1"
                     >
                       <slot name="clear-icon">
-                        <nile-icon name="var(--nile-icon-error, var(--ng-icon-x-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+                        <nile-icon name="error" library="system"></nile-icon>
                       </slot>
                     </button>
                   `
@@ -654,8 +646,7 @@ export class NileInput extends NileElement implements NileFormControl {
                         ? html`
                             <slot name="show-password-icon">
                               <nile-icon
-                                name="var(--nile-icon-eye, var(--ng-icon-eye))"
-                                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                                name="eye"
                                 library="system"
                               ></nile-icon>
                             </slot>
@@ -663,8 +654,7 @@ export class NileInput extends NileElement implements NileFormControl {
                         : html`
                             <slot name="hide-password-icon">
                               <nile-icon
-                                name="var(--nile-icon-eye, var(--ng-icon-eye))"
-                                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                                name="eye"
                                 library="system"
                               ></nile-icon>
                             </slot>

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

@@ -12,9 +12,6 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .link {
@@ -24,8 +21,8 @@ export const styles = css`
     text-align: center;
     user-select: none;
     white-space: nowrap;
-    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    gap: var(--nile-spacing-md, var(--ng-spacing-xs));
+    padding: 12px;
+    gap: 8px;
     height: 38px;
     box-sizing: border-box;
     cursor: pointer;
@@ -33,66 +30,43 @@ export const styles = css`
   }
 
   .link__label {
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    color: var(--nile-colors-primary-600);
     text-align: center;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-type-scale-3);
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    font-weight: 400;
+    line-height: 14px;
     letter-spacing: 0.2px;
   }
 
   .link--disabled {
-    color: var(--nile-colors-primary-600-alt, var(--ng-colors-text-tertiary-600));
+    color: rgba(0, 94, 166, 0.5);
     cursor: not-allowed;
     opacity: 0.6;
   }
 
-  .link.link--disabled:not(.link__button) .link__label {
-    color: var(--nile-colors-primary-600-alt, var(--ng-colors-fg-disabled));
-  }
 
-  
   .link:not(.link--disabled):not(.link__button):hover ,
   .link:not(.link--disabled):not(.link__button):hover .link__label {
-    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-hover));
-    text-decoration: var(--nile-text-decoration-none, var(--ng-text-decoration-underline));
+    color: var(--nile-colors-primary-700);
   }
 
   .link:not(.link--disabled):not(.link__button):active,
   .link:not(.link--disabled):not(.link__button):active .link__label {
-    color: var(--nile-colors-primary-900, var(--ng-colors-text-brand-secondary-hover));
+    color: var(--nile-colors-primary-900);
   }
 
   .link__button:hover {
-    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-tertiary-600));
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    background: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));
-  }
-
-  .link__button.link--disabled .link__label {
-    color: var(--nile-colors-primary-700, var(--ng-colors-fg-disabled));
-  }
-
-  .link__button.link--disabled:hover,
-  .link__button.link--disabled:focus {
-    color: var(--nile-colors-primary-600-alt, var(--ng-colors-fg-disabled));
-    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    background: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-primary-700);
+    border-radius: var(--nile-radius-radius-xs);
+    background: var(--nile-colors-dark-200);
   }
 
   .link__button:active {
-    color: var(--nile-colors-primary-100, var(--ng-colors-text-brand-tertiary-600));
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    background: var(--nile-colors-primary-100, var(--ng-colors-bg-primary));
-    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
-  }
-
-  .link__button:focus {
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
+    color: var(--nile-colors-primary-100);
+    border-radius: var(--nile-radius-radius-xs);
+    background: rgba(0, 94, 166, 0.1);
   }
 
 `;

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

@@ -14,11 +14,8 @@ export const styles = css`
   :host {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-9px, var(--ng-spacing-md));
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    gap: 9px;
+    padding: 16px;
   }
 `;