@nordcode/ui 1.1.6 → 1.2.0

package/out/src/styles/config/extras.css

@@ -0,0 +1,12 @@
+@layer config {
+    :where(html) {
+        --button-height-base: 2.5rem;
+        --button-height-small: 2rem;
+
+        --font-family-link: var(--font-family-default);
+        --font-family-button: var(--font-family-default);
+
+        --input-height-base: 2.5rem;
+        --input-height-small: 2rem;
+    }
+}

package/out/src/styles/exceptions/bundle.css

@@ -0,0 +1,3 @@
+@import "./misc.css";
+@import "./typography.css";
+@import "./spacings.css";

package/out/src/styles/exceptions/misc.css

@@ -0,0 +1,21 @@
+:where(.text-assistive, .sr-only) {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 0;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+}
+
+:where(.break-word) {
+    overflow-wrap: break-word;
+    max-inline-size: 100%;
+    hyphens: auto;
+}
+
+.full-width {
+    inline-size: 100%;
+}

package/out/src/styles/exceptions/spacings.css

@@ -0,0 +1,15 @@
+.mt-base {
+    margin-block-start: var(--spacing-base);
+}
+
+.mt-auto {
+    margin-block-start: auto;
+}
+
+.ml-auto {
+    margin-inline-start: auto;
+}
+
+.mr-auto {
+    margin-inline-end: auto;
+}

package/out/src/styles/exceptions/typography.css

@@ -0,0 +1,57 @@
+.nc-hint {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-base);
+}
+
+.nc-slub {
+    color: var(--color-text-subtle);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+    font-weight: var(--font-weight-active);
+    font-size: var(--font-size-smallest);
+}
+
+.allcaps {
+    text-transform: capitalize;
+}
+
+.strong {
+    font-weight: var(--font-weight-strong);
+}
+
+.font-mono {
+    font-family: var(--font-family-mono);
+}
+
+.font-sans {
+    font-family: var(--font-family-sans);
+}
+
+.font-serif {
+    font-family: var(--font-family-serif);
+}
+
+.font-size-display {
+    font-size: var(--font-size-display);
+}
+
+.font-size-largest {
+    font-size: var(--font-size-largest);
+}
+
+.font-size-large {
+    font-size: var(--font-size-large);
+}
+
+.font-size-base {
+    font-size: var(--font-size-base);
+}
+
+.font-size-small {
+    font-size: var(--font-size-small);
+}
+
+.font-size-smallest {
+    font-size: var(--font-size-smallest);
+}

package/out/src/styles/theme/colors.css

@@ -0,0 +1,165 @@
+@layer theme {
+    :where(html) {
+        color-scheme: light dark;
+    }
+
+    :where([data-theme="light"]) {
+        color-scheme: light;
+    }
+
+    :where([data-theme="dark"]) {
+        color-scheme: dark;
+    }
+
+    :where(:root) {
+        --l-brand-primary: light-dark(var(--l-brand-primary-light), var(--l-brand-primary-dark));
+
+        --color-brand-primary-emphasis: light-dark(var(--color-brand-primary-emphasis-light),
+                var(--color-brand-primary-emphasis-dark));
+
+        --color-brand-primary-base: light-dark(var(--color-brand-primary-base-light),
+                var(--color-brand-primary-base-dark));
+
+        --color-brand-primary-surface: light-dark(var(--color-brand-primary-surface-light),
+                var(--color-brand-primary-surface-dark));
+
+        --color-brand-primary-hover: light-dark(var(--color-brand-primary-hover-light),
+                var(--color-brand-primary-hover-light));
+
+        --color-brand-primary-contrast-lightness: light-dark(var(--color-brand-primary-contrast-lightness-light),
+                var(--color-brand-primary-contrast-lightness-dark));
+
+        --color-brand-primary-contrast: light-dark(var(--color-brand-primary-contrast-light),
+                var(--color-brand-primary-contrast-dark));
+
+        --color-brand-secondary-emphasis: light-dark(var(--color-brand-secondary-emphasis-light),
+                var(--color-brand-secondary-emphasis-dark));
+
+        --color-brand-secondary-base: light-dark(var(--color-brand-secondary-base-light),
+                var(--color-brand-secondary-base-dark));
+
+        --color-brand-secondary-surface: light-dark(var(--color-brand-secondary-surface-light),
+                var(--color-brand-secondary-surface-dark));
+
+        --color-brand-secondary-hover: light-dark(var(--color-brand-secondary-hover-light),
+                var(--color-brand-secondary-hover-dark));
+
+        --color-brand-secondary-contrast: light-dark(var(--color-brand-secondary-contrast-light),
+                var(--color-brand-secondary-contrast-dark));
+
+        --color-text-base: light-dark(var(--color-text-base-light), var(--color-text-base-dark));
+
+        --color-text-muted: light-dark(var(--color-text-muted-light), var(--color-text-muted-dark));
+
+        --color-text-subtle: light-dark(var(--color-text-subtle-light),
+                var(--color-text-subtle-dark));
+
+        --color-text-on-emphasis: light-dark(var(--color-text-on-emphasis-light),
+                var(--color-text-on-emphasis-dark));
+
+        --color-text-hover: light-dark(var(--color-text-hover-light), var(--color-text-hover-dark));
+
+        --color-surface-base: light-dark(var(--color-surface-base-light),
+                var(--color-surface-base-dark));
+
+        --color-surface-muted: light-dark(var(--color-surface-muted-light),
+                var(--color-surface-muted-dark));
+
+        --color-surface-subtle: light-dark(var(--color-surface-subtle-light),
+                var(--color-surface-subtle-dark));
+
+        --color-surface-emphasis: light-dark(var(--color-surface-emphasis-light),
+                var(--color-surface-emphasis-dark));
+
+        --color-border-base: light-dark(var(--color-border-base-light),
+                var(--color-border-base-dark));
+
+        --color-border-muted: light-dark(var(--color-border-muted-light),
+                var(--color-border-muted-dark));
+
+        --color-border-subtle: light-dark(var(--color-border-subtle-light),
+                var(--color-border-subtle-dark));
+
+        --color-border-on-emphasis: light-dark(var(--color-border-on-emphasis-light),
+                var(--color-border-on-emphasis-dark));
+
+        --color-border-hover: light-dark(var(--color-border-hover-light),
+                var(--color-border-hover-dark));
+
+        --color-status-info-emphasis: light-dark(var(--color-status-info-emphasis-light),
+                var(--color-status-info-emphasis-dark));
+
+        --color-status-info-base: light-dark(var(--color-status-info-base-light),
+                var(--color-status-info-base-dark));
+
+        --color-status-info-surface: light-dark(var(--color-status-info-surface-light),
+                var(--color-status-info-surface-dark));
+
+        --color-status-info-hover: light-dark(var(--color-status-info-hover-light),
+                var(--color-status-info-hover-light));
+
+        --color-status-info-contrast-lightness: light-dark(var(--color-status-info-contrast-lightness-light),
+                var(--color-status-info-contrast-lightness-dark));
+
+        --color-status-info-contrast: light-dark(var(--color-status-info-contrast-light),
+                var(--color-status-info-contrast-dark));
+
+        --color-status-success-emphasis: light-dark(var(--color-status-success-emphasis-light),
+                var(--color-status-success-emphasis-dark));
+
+        --color-status-success-base: light-dark(var(--color-status-success-base-light),
+                var(--color-status-success-base-dark));
+
+        --color-status-success-surface: light-dark(var(--color-status-success-surface-light),
+                var(--color-status-success-surface-dark));
+
+        --color-status-success-hover: light-dark(var(--color-status-success-hover-light),
+                var(--color-status-success-hover-light));
+
+        --color-status-success-contrast-lightness: light-dark(var(--color-status-success-contrast-lightness-light),
+                var(--color-status-success-contrast-lightness-dark));
+
+        --color-status-success-contrast: light-dark(var(--color-status-success-contrast-light),
+                var(--color-status-success-contrast-dark));
+
+        --color-status-warning-emphasis: light-dark(var(--color-status-warning-emphasis-light),
+                var(--color-status-warning-emphasis-dark));
+
+        --color-status-warning-base: light-dark(var(--color-status-warning-base-light),
+                var(--color-status-warning-base-dark));
+
+        --color-status-warning-surface: light-dark(var(--color-status-warning-surface-light),
+                var(--color-status-warning-surface-dark));
+
+        --color-status-warning-hover: light-dark(var(--color-status-warning-hover-light),
+                var(--color-status-warning-hover-light));
+
+        --color-status-warning-contrast-lightness: light-dark(var(--color-status-warning-contrast-lightness-light),
+                var(--color-status-warning-contrast-lightness-dark));
+
+        --color-status-warning-contrast: light-dark(var(--color-status-warning-contrast-light),
+                var(--color-status-warning-contrast-dark));
+
+        --color-status-danger-emphasis: light-dark(var(--color-status-danger-emphasis-light),
+                var(--color-status-danger-emphasis-dark));
+
+        --color-status-danger-base: light-dark(var(--color-status-danger-base-light),
+                var(--color-status-danger-base-dark));
+
+        --color-status-danger-surface: light-dark(var(--color-status-danger-surface-light),
+                var(--color-status-danger-surface-dark));
+
+        --color-status-danger-hover: light-dark(var(--color-status-danger-hover-light),
+                var(--color-status-danger-hover-light));
+
+        --color-status-danger-contrast-lightness: light-dark(var(--color-status-danger-contrast-lightness-light),
+                var(--color-status-danger-contrast-lightness-dark));
+
+        --color-status-danger-contrast: light-dark(var(--color-status-danger-contrast-light),
+                var(--color-status-danger-contrast-dark));
+        --shadow-color: light-dark(var(--shadow-color-light), var(--shadow-color-dark));
+        --triangle-down-url: light-dark(var(--triangle-down-url-light),
+                var(--triangle-down-url-dark));
+        --triangle-up-url: light-dark(var(--triangle-up-url-light), var(--triangle-up-url-dark));
+    }
+}

package/out/src/styles/theme/colors_processed.css

@@ -0,0 +1,87 @@
+@layer theme {
+  :where(html) {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light dark;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :where(html) {
+      --lightningcss-light: ;
+      --lightningcss-dark: initial;
+    }
+  }
+
+  :where([data-theme="light"]) {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+  }
+
+  :where([data-theme="dark"]) {
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
+    color-scheme: dark;
+  }
+
+  :where(*) {
+    --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
+    --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
+    --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
+    --color-brand-primary-surface: var(--lightningcss-light, var(--color-brand-primary-surface-light)) var(--lightningcss-dark, var(--color-brand-primary-surface-dark));
+    --color-brand-primary-hover: var(--lightningcss-light, var(--color-brand-primary-hover-light)) var(--lightningcss-dark, var(--color-brand-primary-hover-light));
+    --color-brand-primary-contrast-lightness: var(--lightningcss-light, var(--color-brand-primary-contrast-lightness-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-lightness-dark));
+    --color-brand-primary-contrast: var(--lightningcss-light, var(--color-brand-primary-contrast-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-dark));
+    --color-brand-secondary-emphasis: var(--lightningcss-light, var(--color-brand-secondary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-secondary-emphasis-dark));
+    --color-brand-secondary-base: var(--lightningcss-light, var(--color-brand-secondary-base-light)) var(--lightningcss-dark, var(--color-brand-secondary-base-dark));
+    --color-brand-secondary-surface: var(--lightningcss-light, var(--color-brand-secondary-surface-light)) var(--lightningcss-dark, var(--color-brand-secondary-surface-dark));
+    --color-brand-secondary-hover: var(--lightningcss-light, var(--color-brand-secondary-hover-light)) var(--lightningcss-dark, var(--color-brand-secondary-hover-dark));
+    --color-brand-secondary-contrast: var(--lightningcss-light, var(--color-brand-secondary-contrast-light)) var(--lightningcss-dark, var(--color-brand-secondary-contrast-dark));
+    --color-text-base: var(--lightningcss-light, var(--color-text-base-light)) var(--lightningcss-dark, var(--color-text-base-dark));
+    --color-text-muted: var(--lightningcss-light, var(--color-text-muted-light)) var(--lightningcss-dark, var(--color-text-muted-dark));
+    --color-text-subtle: var(--lightningcss-light, var(--color-text-subtle-light)) var(--lightningcss-dark, var(--color-text-subtle-dark));
+    --color-text-on-emphasis: var(--lightningcss-light, var(--color-text-on-emphasis-light)) var(--lightningcss-dark, var(--color-text-on-emphasis-dark));
+    --color-text-hover: var(--lightningcss-light, var(--color-text-hover-light)) var(--lightningcss-dark, var(--color-text-hover-dark));
+    --color-surface-base: var(--lightningcss-light, var(--color-surface-base-light)) var(--lightningcss-dark, var(--color-surface-base-dark));
+    --color-surface-muted: var(--lightningcss-light, var(--color-surface-muted-light)) var(--lightningcss-dark, var(--color-surface-muted-dark));
+    --color-surface-subtle: var(--lightningcss-light, var(--color-surface-subtle-light)) var(--lightningcss-dark, var(--color-surface-subtle-dark));
+    --color-surface-emphasis: var(--lightningcss-light, var(--color-surface-emphasis-light)) var(--lightningcss-dark, var(--color-surface-emphasis-dark));
+    --color-border-base: var(--lightningcss-light, var(--color-border-base-light)) var(--lightningcss-dark, var(--color-border-base-dark));
+    --color-border-muted: var(--lightningcss-light, var(--color-border-muted-light)) var(--lightningcss-dark, var(--color-border-muted-dark));
+    --color-border-subtle: var(--lightningcss-light, var(--color-border-subtle-light)) var(--lightningcss-dark, var(--color-border-subtle-dark));
+    --color-border-on-emphasis: var(--lightningcss-light, var(--color-border-on-emphasis-light)) var(--lightningcss-dark, var(--color-border-on-emphasis-dark));
+    --color-border-hover: var(--lightningcss-light, var(--color-border-hover-light)) var(--lightningcss-dark, var(--color-border-hover-dark));
+    --color-status-info-emphasis: var(--lightningcss-light, var(--color-status-info-emphasis-light)) var(--lightningcss-dark, var(--color-status-info-emphasis-dark));
+    --color-status-info-base: var(--lightningcss-light, var(--color-status-info-base-light)) var(--lightningcss-dark, var(--color-status-info-base-dark));
+    --color-status-info-surface: var(--lightningcss-light, var(--color-status-info-surface-light)) var(--lightningcss-dark, var(--color-status-info-surface-dark));
+    --color-status-info-hover: var(--lightningcss-light, var(--color-status-info-hover-light)) var(--lightningcss-dark, var(--color-status-info-hover-light));
+    --color-status-info-contrast-lightness: var(--lightningcss-light, var(--color-status-info-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-info-contrast-lightness-dark));
+    --color-status-info-contrast: var(--lightningcss-light, var(--color-status-info-contrast-light)) var(--lightningcss-dark, var(--color-status-info-contrast-dark));
+    --color-status-success-emphasis: var(--lightningcss-light, var(--color-status-success-emphasis-light)) var(--lightningcss-dark, var(--color-status-success-emphasis-dark));
+    --color-status-success-base: var(--lightningcss-light, var(--color-status-success-base-light)) var(--lightningcss-dark, var(--color-status-success-base-dark));
+    --color-status-success-surface: var(--lightningcss-light, var(--color-status-success-surface-light)) var(--lightningcss-dark, var(--color-status-success-surface-dark));
+    --color-status-success-hover: var(--lightningcss-light, var(--color-status-success-hover-light)) var(--lightningcss-dark, var(--color-status-success-hover-light));
+    --color-status-success-contrast-lightness: var(--lightningcss-light, var(--color-status-success-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-success-contrast-lightness-dark));
+    --color-status-success-contrast: var(--lightningcss-light, var(--color-status-success-contrast-light)) var(--lightningcss-dark, var(--color-status-success-contrast-dark));
+    --color-status-warning-emphasis: var(--lightningcss-light, var(--color-status-warning-emphasis-light)) var(--lightningcss-dark, var(--color-status-warning-emphasis-dark));
+    --color-status-warning-base: var(--lightningcss-light, var(--color-status-warning-base-light)) var(--lightningcss-dark, var(--color-status-warning-base-dark));
+    --color-status-warning-surface: var(--lightningcss-light, var(--color-status-warning-surface-light)) var(--lightningcss-dark, var(--color-status-warning-surface-dark));
+    --color-status-warning-hover: var(--lightningcss-light, var(--color-status-warning-hover-light)) var(--lightningcss-dark, var(--color-status-warning-hover-light));
+    --color-status-warning-contrast-lightness: var(--lightningcss-light, var(--color-status-warning-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-lightness-dark));
+    --color-status-warning-contrast: var(--lightningcss-light, var(--color-status-warning-contrast-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-dark));
+    --color-status-danger-emphasis: var(--lightningcss-light, var(--color-status-danger-emphasis-light)) var(--lightningcss-dark, var(--color-status-danger-emphasis-dark));
+    --color-status-danger-base: var(--lightningcss-light, var(--color-status-danger-base-light)) var(--lightningcss-dark, var(--color-status-danger-base-dark));
+    --color-status-danger-surface: var(--lightningcss-light, var(--color-status-danger-surface-light)) var(--lightningcss-dark, var(--color-status-danger-surface-dark));
+    --color-status-danger-hover: var(--lightningcss-light, var(--color-status-danger-hover-light)) var(--lightningcss-dark, var(--color-status-danger-hover-light));
+    --color-status-danger-contrast-lightness: var(--lightningcss-light, var(--color-status-danger-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-lightness-dark));
+    --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
+    --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
+    --shadow-inset: var(--lightningcss-light, var(--shadow-inset-light)) var(--lightningcss-dark, var(--shadow-inset-dark));
+    --shadow-nearest: var(--lightningcss-light, var(--shadow-nearest-light)) var(--lightningcss-dark, var(--shadow-nearest-dark));
+    --shadow-near: var(--lightningcss-light, var(--shadow-near-light)) var(--lightningcss-dark, var(--shadow-near-dark));
+    --shadow-medium: var(--lightningcss-light, var(--shadow-medium-light)) var(--lightningcss-dark, var(--shadow-medium-dark));
+    --shadow-far: var(--lightningcss-light, var(--shadow-far-light)) var(--lightningcss-dark, var(--shadow-far-dark));
+    --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
+    --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
+  }
+}