@netlify/spark-ui 1.4.3 → 1.4.5

package/dist/assets/SearchModal.css

@@ -1 +1 @@
-.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{--n-search-heading-weight: var(--font-weight-regular, 400);--n-search-heading-size: var(--font-size-text-sm, 13px);--n-search-heading-color: var(--color-text-weak, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);color:var(--n-search-heading-color);padding-inline:1rem;margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1em;all:unset;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-text-secondary)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text, currentColor);--n-search-color-text-secondary: var(--color-text-weak, currentColor);--n-search-color-bg: var(--search-bg-color);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--search-highlight-color)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{all:unset;display:flex;width:100%;border-bottom:1px solid var(--n-search-color-border)}.n-search-input{display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem;color:var(--color-text)}.n-search-input::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--n-search-icon-size, .8em);height:var(--n-search-icon-size, .8em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-medium);font-size:1.1em}.n-search-window{height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list,ul[role=list]{list-style:none;padding:0}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.n-search-footer-tip{color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--font-size-text-sm)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}
+.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{--n-search-heading-weight: var(--font-weight-regular, 400);--n-search-heading-size: var(--font-size-text-sm, 13px);--n-search-heading-color: var(--color-text-weak, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);color:var(--n-search-heading-color);padding-inline:1rem;margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1em;all:unset;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-text-secondary)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text, currentColor);--n-search-color-text-secondary: var(--color-text-weak, currentColor);--n-search-color-bg: var(--search-bg-color);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--search-highlight-color)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{all:unset;display:flex;width:100%;border-bottom:1px solid var(--n-search-color-border)}.n-search-input{display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem;color:var(--color-text)}.n-search-input::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--n-search-icon-size, .8em);height:var(--n-search-icon-size, .8em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-medium);font-size:1.1em}.n-search-window{height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.n-search-footer-tip{color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--font-size-text-sm)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/CodeBlock.astro

@@ -1,7 +1,7 @@
 ---
 import { Code } from 'astro:components';
 import '../styles/code-block.css';
-import poimandresTheme from '../../themes/poimandres.json';
+import poimandresTheme from '../themes/poimandres.json';
 import {
   transformerMetaHighlight,
   transformerNotationDiff,

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css

@@ -100,12 +100,6 @@
   background: var(--n-search-color-bg);
 }
 
-.n-results-list,
-ul[role='list'] {
-  list-style: none;
-  padding: 0;
-}
-
 .n-results-list-item {
   border-bottom: 1px solid var(--color-bg-3);
 }

package/packages/themes/poimandres.json

@@ -0,0 +1,311 @@
+{
+  "name": "poimandres",
+  "type": "dark",
+  "colors": {
+    "editor.background": "#1b1e28",
+    "editor.foreground": "#e4f0fb",
+    "editorCursor.foreground": "#add7ff",
+    "editorIndentGuide.background": "#303340",
+    "editorIndentGuide.activeBackground": "#5de4c7",
+    "editor.lineHighlightBackground": "#303340",
+    "editor.selectionBackground": "#303340",
+    "editorLineNumber.foreground": "#303340",
+    "editorLineNumber.activeForeground": "#5de4c7"
+  },
+  "tokenColors": [
+    {
+      "name": "Comment",
+      "scope": ["comment", "punctuation.definition.comment"],
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#a6accd"
+      }
+    },
+    {
+      "name": "Variables",
+      "scope": ["variable", "string constant.other.placeholder"],
+      "settings": {
+        "foreground": "#e4f0fb"
+      }
+    },
+    {
+      "name": "Colors",
+      "scope": ["constant.other.color"],
+      "settings": {
+        "foreground": "#add7ff"
+      }
+    },
+    {
+      "name": "Invalid",
+      "scope": ["invalid", "invalid.illegal"],
+      "settings": {
+        "foreground": "#f95c5b"
+      }
+    },
+    {
+      "name": "Keyword, Storage",
+      "scope": ["keyword", "storage.type", "storage.modifier"],
+      "settings": {
+        "foreground": "#c792ea"
+      }
+    },
+    {
+      "name": "Operator, Misc",
+      "scope": [
+        "keyword.control",
+        "constant.other.color",
+        "punctuation",
+        "meta.tag",
+        "punctuation.definition.tag",
+        "punctuation.separator.inheritance.php",
+        "punctuation.definition.tag.html",
+        "punctuation.definition.tag.begin.html",
+        "punctuation.definition.tag.end.html",
+        "punctuation.section.embedded",
+        "keyword.other.template",
+        "keyword.other.substitution"
+      ],
+      "settings": {
+        "foreground": "#89ddff"
+      }
+    },
+    {
+      "name": "Tag",
+      "scope": [
+        "entity.name.tag",
+        "meta.tag.sgml",
+        "markup.deleted.git_gutter"
+      ],
+      "settings": {
+        "foreground": "#5de4c7"
+      }
+    },
+    {
+      "name": "Function, Special Method",
+      "scope": [
+        "entity.name.function",
+        "meta.function-call",
+        "variable.function",
+        "support.function",
+        "keyword.other.special-method"
+      ],
+      "settings": {
+        "foreground": "#5fb3ff"
+      }
+    },
+    {
+      "name": "Block Level Variables",
+      "scope": ["meta.block variable.other"],
+      "settings": {
+        "foreground": "#e4f0fb"
+      }
+    },
+    {
+      "name": "Other Variable, String Link",
+      "scope": ["support.other.variable", "string.other.link"],
+      "settings": {
+        "foreground": "#f95c5b"
+      }
+    },
+    {
+      "name": "Number, Constant, Function Argument, Tag Attribute, Embedded",
+      "scope": [
+        "constant.numeric",
+        "constant.language",
+        "support.constant",
+        "constant.character",
+        "constant.escape",
+        "variable.parameter",
+        "keyword.other.unit",
+        "keyword.other"
+      ],
+      "settings": {
+        "foreground": "#5de4c7"
+      }
+    },
+    {
+      "name": "String, Symbols, Inherited Class, Markup Heading",
+      "scope": [
+        "string",
+        "constant.other.symbol",
+        "constant.other.key",
+        "entity.other.inherited-class",
+        "markup.heading",
+        "markup.inserted.git_gutter",
+        "meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js"
+      ],
+      "settings": {
+        "foreground": "#add7ff"
+      }
+    },
+    {
+      "name": "Class, Support",
+      "scope": [
+        "entity.name",
+        "support.type",
+        "support.class",
+        "support.other.namespace.use.php",
+        "meta.use.php",
+        "support.other.namespace.php",
+        "markup.changed.git_gutter",
+        "support.type.sys-types"
+      ],
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "Entity Types",
+      "scope": ["support.type"],
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "CSS Class and Support",
+      "scope": [
+        "source.css support.type.property-name",
+        "source.sass support.type.property-name",
+        "source.scss support.type.property-name",
+        "source.less support.type.property-name",
+        "source.stylus support.type.property-name",
+        "source.postcss support.type.property-name"
+      ],
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "Sub-methods",
+      "scope": [
+        "entity.name.module.js",
+        "variable.import.parameter.js",
+        "variable.other.class.js"
+      ],
+      "settings": {
+        "foreground": "#f95c5b"
+      }
+    },
+    {
+      "name": "Language methods",
+      "scope": ["variable.language"],
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#f95c5b"
+      }
+    },
+    {
+      "name": "entity.name.method.js",
+      "scope": ["entity.name.method.js"],
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#5fb3ff"
+      }
+    },
+    {
+      "name": "meta.method.js",
+      "scope": [
+        "meta.class-method.js entity.name.function.js",
+        "variable.function.constructor"
+      ],
+      "settings": {
+        "foreground": "#5fb3ff"
+      }
+    },
+    {
+      "name": "Attributes",
+      "scope": ["entity.other.attribute-name"],
+      "settings": {
+        "foreground": "#c792ea"
+      }
+    },
+    {
+      "name": "HTML Attributes",
+      "scope": [
+        "text.html.basic entity.other.attribute-name.html",
+        "text.html.basic entity.other.attribute-name"
+      ],
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "CSS Classes",
+      "scope": ["entity.other.attribute-name.class"],
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "CSS ID's",
+      "scope": ["source.sass keyword.control"],
+      "settings": {
+        "foreground": "#5fb3ff"
+      }
+    },
+    {
+      "name": "Inserted",
+      "scope": ["markup.inserted"],
+      "settings": {
+        "foreground": "#add7ff"
+      }
+    },
+    {
+      "name": "Deleted",
+      "scope": ["markup.deleted"],
+      "settings": {
+        "foreground": "#f95c5b"
+      }
+    },
+    {
+      "name": "Changed",
+      "scope": ["markup.changed"],
+      "settings": {
+        "foreground": "#c792ea"
+      }
+    },
+    {
+      "name": "Regular Expressions",
+      "scope": ["string.regexp"],
+      "settings": {
+        "foreground": "#89ddff"
+      }
+    },
+    {
+      "name": "Escape Characters",
+      "scope": ["constant.character.escape"],
+      "settings": {
+        "foreground": "#89ddff"
+      }
+    },
+    {
+      "name": "URL",
+      "scope": ["*url*", "*link*", "*uri*"],
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "name": "Decorators",
+      "scope": [
+        "tag.decorator.js entity.name.tag.js",
+        "tag.decorator.js punctuation.definition.tag.js"
+      ],
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#5fb3ff"
+      }
+    },
+    {
+      "name": "ES7 Bind Operator",
+      "scope": [
+        "source.js constant.other.object.key.js string.unquoted.label.js"
+      ],
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#f95c5b"
+      }
+    }
+  ]
+}