@scalar/blocks 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @scalar/blocks
 
+## 0.1.7
+
 ## 0.1.6
 
 ## 0.1.5

package/dist/constants.js

@@ -1,5 +1,5 @@
 //#region src/constants.ts
-var e = typeof OVERRIDE_PACKAGE_VERSION < "u" ? OVERRIDE_PACKAGE_VERSION : "0.1.6";
+var e = typeof OVERRIDE_PACKAGE_VERSION < "u" ? OVERRIDE_PACKAGE_VERSION : "0.1.7";
 //#endregion
 export { e as APP_VERSION };
 

package/dist/style.css

@@ -190,8 +190,13 @@
   :root {
     --scalar-border-width: .5px;
     --scalar-radius: 3px;
-    --scalar-radius-lg: 6px;
-    --scalar-radius-xl: 8px;
+    --scalar-radius-max: 20px;
+    --scalar-radius-md: min(var(--scalar-radius), var(--scalar-radius-max));
+    --scalar-radius-lg: min(calc(var(--scalar-radius) * 2), var(--scalar-radius-max));
+    --scalar-radius-xl: min(calc(var(--scalar-radius) * 8 / 3), var(--scalar-radius-max));
+    --scalar-radius-2xl: min(calc(var(--scalar-radius) * 4), var(--scalar-radius-max));
+    --scalar-radius-3xl: min(calc(var(--scalar-radius) * 16 / 3), var(--scalar-radius-max));
+    --scalar-radius-full: calc(var(--scalar-radius) * 9999);
     --scalar-font: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
     "Noto Color Emoji";
     --scalar-font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -876,7 +881,7 @@
 }
 
 :where(.scalar-app) input:where(:not([type="button"], [type="reset"], [type="submit"])), :where(.scalar-app) select, :where(.scalar-app) textarea {
-  border-radius: var(--scalar-radius);
+  border-radius: var(--scalar-radius-md);
   border-width: 1px;
 }
 
@@ -912,7 +917,6 @@
 }
 
 :where(.scalar-app) :focus-visible {
-  border-radius: var(--scalar-radius);
   outline-style: solid;
 }
 
@@ -2160,7 +2164,15 @@
 }
 
 .scalar-app .rounded {
-  border-radius: var(--scalar-radius);
+  border-radius: var(--scalar-radius-md);
+}
+
+.scalar-app .rounded-2xl {
+  border-radius: var(--scalar-radius-2xl);
+}
+
+.scalar-app .rounded-3xl {
+  border-radius: var(--scalar-radius-3xl);
 }
 
 .scalar-app .rounded-\[inherit\] {
@@ -2168,7 +2180,7 @@
 }
 
 .scalar-app .rounded-full {
-  border-radius: 9999px;
+  border-radius: var(--scalar-radius-full);
 }
 
 .scalar-app .rounded-lg {
@@ -2176,7 +2188,7 @@
 }
 
 .scalar-app .rounded-md {
-  border-radius: var(--scalar-radius);
+  border-radius: var(--scalar-radius-md);
 }
 
 .scalar-app .rounded-none {
@@ -2187,14 +2199,19 @@
   border-radius: var(--scalar-radius-xl);
 }
 
+.scalar-app .rounded-t-\[inherit\] {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
 .scalar-app .rounded-l-none {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
 .scalar-app .rounded-b {
-  border-bottom-right-radius: var(--scalar-radius);
-  border-bottom-left-radius: var(--scalar-radius);
+  border-bottom-right-radius: var(--scalar-radius-md);
+  border-bottom-left-radius: var(--scalar-radius-md);
 }
 
 .scalar-app .border {
@@ -2889,6 +2906,11 @@
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
+.scalar-app .ring {
+  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
 .scalar-app .outline {
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
@@ -3050,7 +3072,7 @@
 }
 
 :is(.scalar-app .\*\:rounded > *) {
-  border-radius: var(--scalar-radius);
+  border-radius: var(--scalar-radius-md);
 }
 
 :is(.scalar-app .\*\:border > *) {
@@ -3757,7 +3779,7 @@
 }
 
 .scalar-app .markdown img {
-  border-radius: var(--scalar-radius);
+  border-radius: var(--scalar-radius-md);
   max-width: 100%;
   display: inline-block;
   overflow: hidden;
@@ -3817,7 +3839,7 @@
 .scalar-app .markdown table {
   table-layout: fixed;
   border: var(--scalar-border-width) solid var(--scalar-border-color);
-  border-radius: var(--scalar-radius);
+  border-radius: var(--scalar-radius-md);
   border-spacing: 0;
   width: max-content;
   max-width: 100%;
@@ -3887,11 +3909,11 @@
 }
 
 .scalar-app .markdown th:first-of-type {
-  border-top-left-radius: var(--scalar-radius);
+  border-top-left-radius: var(--scalar-radius-md);
 }
 
 .scalar-app .markdown th:last-of-type {
-  border-top-right-radius: var(--scalar-radius);
+  border-top-right-radius: var(--scalar-radius-md);
 }
 
 .scalar-app .markdown tr > [align="left"] {
@@ -3930,13 +3952,13 @@
 }
 
 .scalar-app .markdown summary {
+  border-radius: var(--scalar-radius);
   min-height: 40px;
   font-weight: var(--scalar-semibold);
   line-height: var(--markdown-line-height);
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
-  border-radius: 2.5px;
   align-items: flex-start;
   gap: 8px;
   padding: 7px 14px;
@@ -4055,7 +4077,7 @@
   background-color: var(--scalar-background-2);
   box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
   font-size: var(--scalar-micro);
-  border-radius: 2px;
+  border-radius: var(--scalar-radius-md);
   padding: 0 3px;
 }
 
@@ -4129,7 +4151,7 @@
 }
 
 .scalar-app .markdown .markdown-alert {
-  border-radius: var(--scalar-radius);
+  border-radius: var(--scalar-radius-md);
   background-color: var(--scalar-background-2);
   align-items: stretch;
 }
@@ -4491,7 +4513,7 @@
 :where(body) > .scalar-tooltip:before {
   content: "";
   z-index: calc(1 * -1);
-  border-radius: var(--scalar-radius);
+  border-radius: var(--scalar-radius-md);
   background-color: var(--scalar-tooltip-background);
   --tw-backdrop-blur: blur(8px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -4525,21 +4547,21 @@
   display: none;
 }
 
-.scalar-virtual-text[data-v-b50a85e1]:focus {
+.scalar-virtual-text[data-v-77b9d685]:focus {
   outline: none;
 }
 
-.scalar-virtual-text-highlight[data-v-b50a85e1] {
+.scalar-virtual-text-highlight[data-v-77b9d685] {
   background: var(--scalar-background-accent);
   color: inherit;
-  border-radius: 2px;
+  border-radius: var(--scalar-radius);
   padding: 1px 0;
 }
 
-.scalar-virtual-text-highlight-active[data-v-b50a85e1] {
+.scalar-virtual-text-highlight-active[data-v-77b9d685] {
   background: var(--scalar-color-accent);
   color: var(--scalar-background-1);
-  border-radius: 2px;
+  border-radius: var(--scalar-radius);
 }
 
 @property --tw-translate-x {

package/package.json

@@ -17,7 +17,7 @@
     "blocks",
     "docs"
   ],
-  "version": "0.1.6",
+  "version": "0.1.7",
   "engines": {
     "node": ">=22"
   },
@@ -49,13 +49,13 @@
     "@types/har-format": "^1.2.16",
     "js-base64": "^3.7.8",
     "vue": "^3.5.30",
-    "@scalar/components": "0.27.7",
-    "@scalar/helpers": "0.9.1",
     "@scalar/icons": "0.7.4",
-    "@scalar/themes": "0.16.3",
-    "@scalar/types": "0.16.3",
+    "@scalar/components": "0.27.8",
     "@scalar/snippetz": "0.9.22",
-    "@scalar/workspace-store": "0.55.5"
+    "@scalar/themes": "0.17.0",
+    "@scalar/types": "0.16.3",
+    "@scalar/workspace-store": "0.55.5",
+    "@scalar/helpers": "0.9.1"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.2.4",