@birdapi/velinstyle 0.6.1 → 0.7.0

package/dist/velinstyle.css

@@ -616,6 +616,51 @@
     .velin-nav__link[aria-current="page"] {
       border-block-end: 2px solid highlight;
     }
+
+    .velin-switch__track {
+      border: 1px solid buttontext;
+    }
+
+    .velin-switch__input:checked + .velin-switch__track {
+      background-color: highlight;
+      border-color: highlight;
+    }
+
+    .velin-pagination__link {
+      border: 1px solid buttontext;
+    }
+
+    .velin-pagination__link--active, .velin-pagination__link[aria-current="page"] {
+      color: highlighttext;
+      background-color: highlight;
+      border-color: highlight;
+    }
+
+    .velin-chip {
+      border: 1px solid buttontext;
+    }
+
+    .velin-stepper .step__marker {
+      border: 2px solid buttontext;
+    }
+
+    .velin-stepper .step--active .step__marker, .velin-stepper .step[aria-current="step"] .step__marker {
+      color: highlighttext;
+      background-color: highlight;
+    }
+
+    .velin-modal__backdrop, .velin-drawer__backdrop {
+      opacity: 1;
+      background-color: canvas;
+    }
+
+    .velin-progress__bar {
+      border: 1px solid buttontext;
+    }
+
+    .velin-progress__fill {
+      background-color: highlight;
+    }
   }
 
   .velin-skeleton {
@@ -702,6 +747,22 @@
     .velin-divider {
       border-width: 2px;
     }
+
+    .velin-nav__link {
+      font-weight: var(--velin-weight-semibold);
+    }
+
+    .velin-pagination__link, .velin-table th, .velin-table td {
+      border-width: 2px;
+    }
+
+    .velin-stepper .step__connector {
+      block-size: 3px;
+    }
+
+    .velin-stepper .step__label {
+      font-weight: var(--velin-weight-semibold);
+    }
   }
 
   @media (prefers-contrast: less) {
@@ -739,67 +800,68 @@
     }
   }
 
-  .velin-secure-frame {
-    display: none;
+  :root {
+    --velin-nav-height: 4rem;
+    scroll-padding-block-start: var(--velin-nav-height);
   }
 
-  @media all {
-    .velin-secure-frame {
-      display: block;
-    }
+  .velin-scroll-pt-nav {
+    scroll-padding-block-start: var(--velin-nav-height);
   }
 
-  a[target="_blank"]:not([rel~="noopener"]) {
-    &:after {
-      content: " ↗";
-      vertical-align: super;
-      font-size: .75em;
-    }
+  .velin-scroll-pt-none {
+    scroll-padding-block-start: 0;
   }
 
-  .velin-user-content {
-    all: initial;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-    contain: layout style paint;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    display: block;
-    overflow: hidden;
+  main:target, [id="main"]:target {
+    scroll-margin-block-start: var(--velin-nav-height);
   }
 
-  .velin-user-content img, .velin-user-content video {
-    max-width: 100%;
-    height: auto;
+  .velin-target-min {
+    min-block-size: 1.5rem;
+    min-inline-size: 1.5rem;
   }
 
-  .velin-user-content a {
-    color: var(--velin-color-primary, #2563eb);
-    text-decoration: underline;
+  .velin-target-touch, .velin-alert__close, .velin-toast-close, .velin-btn--sm {
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
   }
 
-  .velin-user-content script, .velin-user-content iframe, .velin-user-content object, .velin-user-content embed, .velin-user-content applet, .velin-user-content form[action], .velin-user-content [onload], .velin-user-content [onerror], .velin-user-content [onclick] {
-    display: none !important;
+  .velin-pagination__ellipsis {
+    min-inline-size: 2.75rem;
   }
 
-  input[type="password"], input[type="email"], input[type="tel"], input[type="number"][inputmode="numeric"] {
-    -webkit-text-security: disc;
+  .velin-pagination--sm .velin-pagination__link {
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
   }
 
-  input[type="password"]:after, input[type="password"]:before {
-    content: normal !important;
+  :root[data-velin-contrast="aaa"] {
+    --velin-color-text: oklch(8% .01 250);
+    --velin-color-text-muted: oklch(28% .01 250);
+    --velin-color-text-subtle: oklch(38% .01 250);
+    --velin-color-border: oklch(35% .01 250);
+    --velin-color-border-strong: oklch(20% .01 250);
+    --velin-color-primary: oklch(38% .18 250);
+    --velin-color-primary-hover: oklch(32% .18 250);
+    --velin-color-on-primary: oklch(100% 0 0);
+    --velin-color-focus: oklch(35% .22 250);
   }
 
-  input:not([data-velin-no-paste]), textarea:not([data-velin-no-paste]) {
-    -webkit-user-modify: read-write;
+  :root[data-velin-contrast="aaa"][data-velin-theme="dark"], :root[data-velin-contrast="aaa"]:not([data-velin-theme="light"]) {
+    @media (prefers-color-scheme: dark) {
+      --velin-color-text: oklch(98% .005 250);
+      --velin-color-text-muted: oklch(82% .005 250);
+      --velin-color-text-subtle: oklch(72% .005 250);
+      --velin-color-border: oklch(55% .01 250);
+      --velin-color-border-strong: oklch(70% .01 250);
+      --velin-color-primary: oklch(78% .14 250);
+      --velin-color-on-primary: oklch(8% .01 250);
+    }
   }
 
-  input:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0 1000px var(--velin-color-surface-bright, #fff) inset;
-    -webkit-text-fill-color: var(--velin-color-text, #1a1a2e);
-    transition: background-color 600000s, color 600000s;
+  :root[data-velin-contrast="aaa"] .velin-btn, :root[data-velin-contrast="aaa"] .velin-input, :root[data-velin-contrast="aaa"] .velin-select, :root[data-velin-contrast="aaa"] .velin-textarea {
+    border-width: 2px;
   }
 }
 
@@ -8557,4 +8619,69 @@
   }
 }
 
+@layer security {
+  .velin-secure-frame {
+    display: none;
+  }
+
+  @media all {
+    .velin-secure-frame {
+      display: block;
+    }
+  }
+
+  a[target="_blank"]:not([rel~="noopener"]) {
+    &:after {
+      content: " ↗";
+      vertical-align: super;
+      font-size: .75em;
+    }
+  }
+
+  .velin-user-content {
+    all: initial;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    contain: layout style paint;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    display: block;
+    overflow: hidden;
+  }
+
+  .velin-user-content img, .velin-user-content video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .velin-user-content a {
+    color: var(--velin-color-primary, #2563eb);
+    text-decoration: underline;
+  }
+
+  .velin-user-content script, .velin-user-content iframe, .velin-user-content object, .velin-user-content embed, .velin-user-content applet, .velin-user-content form[action], .velin-user-content [onload], .velin-user-content [onerror], .velin-user-content [onclick] {
+    display: none !important;
+  }
+
+  input[type="password"] {
+    -webkit-text-security: disc;
+  }
+
+  input[type="password"]:after, input[type="password"]:before {
+    content: normal !important;
+  }
+
+  input:not([data-velin-no-paste]), textarea:not([data-velin-no-paste]) {
+    -webkit-user-modify: read-write;
+  }
+
+  input:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 1000px var(--velin-color-surface-bright, #fff) inset;
+    -webkit-text-fill-color: var(--velin-color-text, #1a1a2e);
+    transition: background-color 600000s, color 600000s;
+  }
+}
+
 @layer themes;