@delightui/components 0.1.19 → 0.1.21

package/dist/cjs/library.css

@@ -1623,7 +1623,7 @@ span.flatpickr-weekday {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.NavLink-module_navLink__ZbL1G[component-variant^=button-] {
+.NavLink-module_navLink__ZbL1G.NavLink-module_button__fm4B7 {
   height: var(--button-height);
   min-height: var(--button-min-height);
   max-height: var(--button-max-height);
@@ -1657,6 +1657,40 @@ span.flatpickr-weekday {
   line-height: var(--button-line-height);
   color: var(--button-color);
 }
+.NavLink-module_navLink__ZbL1G.NavLink-module_link__FSAEq {
+  height: var(--nav-link-height);
+  min-height: var(--nav-link-min-height);
+  max-height: var(--nav-link-max-height);
+  width: var(--nav-link-width);
+  min-width: var(--nav-link-min-width);
+  max-width: var(--nav-link-max-width);
+  padding-top: calc(var(--nav-link-padding-top) - var(--nav-link-border-top-width));
+  padding-bottom: calc(var(--nav-link-padding-bottom) - var(--nav-link-border-bottom-width));
+  padding-left: calc(var(--nav-link-padding-left) - var(--nav-link-border-left-width));
+  padding-right: calc(var(--nav-link-padding-right) - var(--nav-link-border-right-width));
+  row-gap: var(--nav-link-row-gap);
+  -moz-column-gap: var(--nav-link-column-gap);
+       column-gap: var(--nav-link-column-gap);
+  border-bottom-width: var(--nav-link-border-bottom-width);
+  border-left-width: var(--nav-link-border-left-width);
+  border-right-width: var(--nav-link-border-right-width);
+  border-top-width: var(--nav-link-border-top-width);
+  border-style: var(--nav-link-border-style);
+  border-color: var(--nav-link-border-color);
+  border-top-left-radius: var(--nav-link-border-top-left-radius);
+  border-top-right-radius: var(--nav-link-border-top-right-radius);
+  border-bottom-right-radius: var(--nav-link-border-bottom-right-radius);
+  border-bottom-left-radius: var(--nav-link-border-bottom-left-radius);
+  outline-width: var(--nav-link-outline-width);
+  outline-style: var(--nav-link-outline-style);
+  outline-color: var(--nav-link-outline-color);
+  background-color: var(--nav-link-background-color);
+  font-family: var(--nav-link-font-family);
+  font-size: var(--nav-link-font-size);
+  font-weight: var(--nav-link-font-weight);
+  line-height: var(--nav-link-line-height);
+  color: var(--nav-link-color);
+}
 .NavLink-module_navLink__ZbL1G:disabled {
   cursor: not-allowed;
 }
@@ -12526,6 +12560,111 @@ span.flatpickr-weekday {
     --select-options-paragraph-indent: 0px
 }
 
+[component-variant^="nav-link-"] {
+    --nav-link-opacity: 1;
+    --nav-link-height: auto;
+    --nav-link-min-height: auto;
+    --nav-link-max-height: none;
+    --nav-link-width: auto;
+    --nav-link-min-width: auto;
+    --nav-link-max-width: none;
+    --nav-link-background-color: transparent;
+    --nav-link-fill: currentcolor;
+    --nav-link-border-top-left-radius: 0px;
+    --nav-link-border-top-right-radius: 0px;
+    --nav-link-border-bottom-left-radius: 0px;
+    --nav-link-border-bottom-right-radius: 0px;
+    --nav-link-border-color: transparent;
+    --nav-link-border-style: solid;
+    --nav-link-border-gap: normal;
+    --nav-link-border-dash: none;
+    --nav-link-border-top-width: 0px;
+    --nav-link-border-right-width: 0px;
+    --nav-link-border-bottom-width: 0px;
+    --nav-link-border-left-width: 0px;
+    --nav-link-outline-color: auto;
+    --nav-link-outline-style: solid;
+    --nav-link-outline-width: 0px;
+    --nav-link-padding-left: 0px;
+    --nav-link-padding-right: 0px;
+    --nav-link-padding-top: 0px;
+    --nav-link-padding-bottom: 0px;
+    --nav-link-row-gap: 0px;
+    --nav-link-column-gap: 0px;
+    --nav-link-font-family: sans-serif;
+    --nav-link-font-size: medium;
+    --nav-link-color: currentcolor;
+    --nav-link-letter-spacing: normal;
+    --nav-link-line-height: normal;
+    --nav-link-paragraph-spacing: ;
+    --nav-link-paragraph-indent: 
+}
+
+[component-variant="nav-link-default"] {
+    --nav-link-color: var(--colours-purple-400);
+    --nav-link-padding-left: var(--spacing-extra-extra-small);
+    --nav-link-padding-right: var(--spacing-extra-extra-small);
+    --nav-link-font-family: var(--font-family-body);
+    --nav-link-font-size: var(--font-size-body-small);
+    --nav-link-font-weight: var(--font-weight-medium);
+    --nav-link-line-height: var(--line-height-body-small);
+    --nav-link-paragraph-spacing: 0px;
+    --nav-link-paragraph-indent: 0px
+}
+
+[component-variant="nav-link-default"]:hover:not(:disabled):not([disabled]) {
+    --nav-link-color: var(--text-primary);
+    --nav-link-padding-left: var(--spacing-extra-extra-small);
+    --nav-link-padding-right: var(--spacing-extra-extra-small);
+    --nav-link-font-family: var(--font-family-body);
+    --nav-link-font-size: var(--font-size-body-small);
+    --nav-link-font-weight: var(--font-weight-medium);
+    --nav-link-line-height: var(--line-height-body-small);
+    --nav-link-paragraph-spacing: 0px;
+    --nav-link-paragraph-indent: 0px
+}
+
+[component-variant="nav-link-default"][disabled],
+[component-variant="nav-link-default"]:disabled {
+    --nav-link-color: var(--text-secondary);
+    --nav-link-padding-left: var(--spacing-extra-extra-small);
+    --nav-link-padding-right: var(--spacing-extra-extra-small);
+    --nav-link-font-family: var(--font-family-body);
+    --nav-link-font-size: var(--font-size-body-small);
+    --nav-link-font-weight: var(--font-weight-medium);
+    --nav-link-line-height: var(--line-height-body-small);
+    --nav-link-paragraph-spacing: 0px;
+    --nav-link-paragraph-indent: 0px
+}
+
+[component-variant="nav-link-default"][active]:not(:disabled):not([disabled]),
+[component-variant="nav-link-default"]:active:not(:disabled):not([disabled]) {
+    --nav-link-color: var(--text-primary);
+    --nav-link-padding-left: var(--spacing-extra-extra-small);
+    --nav-link-padding-right: var(--spacing-extra-extra-small);
+    --nav-link-font-family: var(--font-family-body);
+    --nav-link-font-size: var(--font-size-body-small);
+    --nav-link-font-weight: var(--font-weight-medium);
+    --nav-link-line-height: var(--line-height-body-small);
+    --nav-link-paragraph-spacing: 0px;
+    --nav-link-paragraph-indent: 0px
+}
+
+[component-variant="nav-link-default"]:focus-within:not(:disabled):not([disabled]),
+[component-variant="nav-link-default"]:focus-visible:not(:disabled):not([disabled]) {
+    --nav-link-color: var(--text-primary);
+    --nav-link-outline-color: var(--colours-grey-0);
+    --nav-link-outline-width: 1px;
+    --nav-link-padding-left: var(--spacing-extra-extra-small);
+    --nav-link-padding-right: var(--spacing-extra-extra-small);
+    --nav-link-font-family: var(--font-family-body);
+    --nav-link-font-size: var(--font-size-body-small);
+    --nav-link-font-weight: var(--font-weight-medium);
+    --nav-link-line-height: var(--line-height-body-small);
+    --nav-link-paragraph-spacing: 0px;
+    --nav-link-paragraph-indent: 0px
+}
+
 [component-variant^="select-list-item-"] {
     --select-list-item-opacity: 1;
     --select-list-item-height: auto;