@sveltia/ui 0.42.0 → 0.43.0

package/dist/components/text-editor/lexical-root.svelte

@@ -131,224 +131,163 @@
   {hidden}
 ></div>
 
-<style lang="scss">
-  .lexical-root {
-    overflow: hidden;
-    border: 1px solid var(--sui-textbox-border-color);
-    border-radius: var(--sui-textbox-border-radius) !important;
-    padding: var(--sui-textbox-multiline-padding);
-    min-height: 8em;
-    color: var(--sui-textbox-foreground-color);
-    background-color: var(--sui-textbox-background-color);
-    font-family: var(--sui-textbox-font-family);
-    font-size: var(--sui-textbox-font-size);
-    line-height: var(--sui-textbox-multiline-line-height);
-
-    &:not(:first-child) {
-      border-start-start-radius: 0 !important;
-      border-start-end-radius: 0 !important;
-    }
-
-    &.code {
-      padding: 0;
-
-      :global {
-        .code-block {
-          border-radius: 0 !important;
-          min-height: 120px;
-        }
-      }
-    }
-
-    &:focus-visible {
-      outline: 0;
-    }
-
-    &[aria-invalid='true'] {
-      border-color: var(--sui-error-border-color);
-    }
-
-    :global {
-      // Remove the default margin on the first and last child elements of block nodes, including
-      // paragraphs, headings, lists, and code blocks, but keep the default margin on other items,
-      // including UI widgets like radio buttons, checkboxes, and select menus
-      [dir] {
-        &:first-child {
-          margin-top: 0;
-        }
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-
-      strong.italic {
-        font-style: italic;
-      }
-
-      .strikethrough {
-        text-decoration: line-through;
-      }
-
-      li.nested {
-        list-style-type: none;
-      }
-
-      .code-block {
-        position: relative;
-        display: block;
-        padding-block: 8px;
-        padding-inline-start: 56px;
-        padding-inline-end: 8px;
-        background-color: var(--sui-code-background-color);
-        overflow-x: auto;
-        white-space: pre;
-
-        &:not(:first-child) {
-          margin-top: 1em;
-        }
-
-        &:not(:last-child) {
-          margin-bottom: 1em;
-        }
-
-        &::before {
-          position: absolute;
-          inset-block: 0;
-          inset-inline-start: 0;
-          inset-inline-end: auto;
-          content: attr(data-gutter);
-          padding: 8px;
-          min-width: 40px;
-          color: var(--sui-tertiary-foreground-color);
-          background-color: var(--sui-tertiary-background-color);
-          text-align: end;
-        }
-      }
-
-      [data-lexical-text='true'] {
-        cursor: text;
-      }
-
-      :is(th, td) > p {
-        margin: 0;
-        white-space: normal;
-        word-break: normal;
-      }
-
-      hr {
-        margin: var(--sui-paragraph-margin) 0;
-        border: none;
-        padding: 0;
-
-        &::after {
-          display: block;
-          height: 2px;
-          background-color: var(--sui-control-border-color);
-          line-height: 2px;
-          content: '';
-        }
-      }
-    }
-  }
-
-  // Part of the Default Prism theme
-  :root[data-theme='light'] .lexical-root {
-    :global {
-      .token:is(.comment, .prolog, .doctype, .cdata) {
-        color: slategray;
-      }
-
-      .token.punctuation {
-        color: #999;
-      }
-
-      .token.namespace {
-        opacity: 0.7;
-      }
-
-      .token:is(.property, .tag, .boolean, .number, .constant, .symbol, .deleted) {
-        color: #905;
-      }
-
-      .token:is(.selector, .attr-name, .string, .char, .builtin, .inserted) {
-        color: #690;
-      }
-
-      .token:is(.operator, .entity, .url),
-      .language-css .token.string,
-      .style .token.string {
-        color: #9a6e3a;
-      }
-
-      .token:is(.atrule, .attr-value, .keyword) {
-        color: #07a;
-      }
-
-      .token:is(.function, .class-name) {
-        color: #dd4a68;
-      }
-
-      .token:is(.regex, .important, .variable) {
-        color: #e90;
-      }
-    }
-  }
-
-  // Part of the Tomorrow Night Prism theme
-  :root[data-theme='dark'] .lexical-root {
-    :global {
-      .token:is(.comment, .block-comment, .prolog, .doctype, .cdata) {
-        color: #999;
-      }
-
-      .token.punctuation {
-        color: #ccc;
-      }
-
-      .token:is(.tag, .attr-name, .namespace, .deleted) {
-        color: #e2777a;
-      }
-
-      .token.function-name {
-        color: #6196cc;
-      }
-
-      .token:is(.boolean, .number, .function) {
-        color: #f08d49;
-      }
-
-      .token:is(.property, .class-name, .constant, .symbol) {
-        color: #f8c555;
-      }
-
-      .token:is(.selector, .important, .atrule, .keyword, .builtin) {
-        color: #cc99cd;
-      }
-
-      .token:is(.string, .char, .attr-value, .regex, .variable) {
-        color: #7ec699;
-      }
-
-      .token:is(.operator, .entity, .url) {
-        color: #67cdcc;
-      }
-
-      .token:is(.important, .bold) {
-        font-weight: bold;
-      }
-
-      .token.italic {
-        font-style: italic;
-      }
-
-      .token.entity {
-        cursor: help;
-      }
-
-      .token.inserted {
-        color: green;
-      }
-    }
-  }
-</style>
+<style>.lexical-root {
+  overflow: hidden;
+  border: 1px solid var(--sui-textbox-border-color);
+  border-radius: var(--sui-textbox-border-radius) !important;
+  padding: var(--sui-textbox-multiline-padding);
+  min-height: 8em;
+  color: var(--sui-textbox-foreground-color);
+  background-color: var(--sui-textbox-background-color);
+  font-family: var(--sui-textbox-font-family);
+  font-size: var(--sui-textbox-font-size);
+  line-height: var(--sui-textbox-multiline-line-height);
+}
+.lexical-root:not(:first-child) {
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+}
+.lexical-root.code {
+  padding: 0;
+}
+.lexical-root.code :global(.code-block) {
+  border-radius: 0 !important;
+  min-height: 120px;
+}
+.lexical-root:focus-visible {
+  outline: 0;
+}
+.lexical-root[aria-invalid=true] {
+  border-color: var(--sui-error-border-color);
+}
+.lexical-root :global([dir]:first-child) {
+  margin-top: 0;
+}
+.lexical-root :global([dir]:last-child) {
+  margin-bottom: 0;
+}
+.lexical-root :global(strong.italic) {
+  font-style: italic;
+}
+.lexical-root :global(.strikethrough) {
+  text-decoration: line-through;
+}
+.lexical-root :global(li.nested) {
+  list-style-type: none;
+}
+.lexical-root :global(.code-block) {
+  position: relative;
+  display: block;
+  padding-block: 8px;
+  padding-inline-start: 56px;
+  padding-inline-end: 8px;
+  background-color: var(--sui-code-background-color);
+  overflow-x: auto;
+  white-space: pre;
+}
+.lexical-root :global(.code-block:not(:first-child)) {
+  margin-top: 1em;
+}
+.lexical-root :global(.code-block:not(:last-child)) {
+  margin-bottom: 1em;
+}
+.lexical-root :global(.code-block::before) {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inset-inline-end: auto;
+  content: attr(data-gutter);
+  padding: 8px;
+  min-width: 40px;
+  color: var(--sui-tertiary-foreground-color);
+  background-color: var(--sui-tertiary-background-color);
+  text-align: end;
+}
+.lexical-root :global([data-lexical-text=true]) {
+  cursor: text;
+}
+.lexical-root :global(:is(th, td)) > :global(p) {
+  margin: 0;
+  white-space: normal;
+  word-break: normal;
+}
+.lexical-root :global(hr) {
+  margin: var(--sui-paragraph-margin) 0;
+  border: none;
+  padding: 0;
+}
+.lexical-root :global(hr::after) {
+  display: block;
+  height: 2px;
+  background-color: var(--sui-control-border-color);
+  line-height: 2px;
+  content: "";
+}
+
+:root[data-theme=light] .lexical-root :global(.token:is(.comment, .prolog, .doctype, .cdata)) {
+  color: slategray;
+}
+:root[data-theme=light] .lexical-root :global(.token.punctuation) {
+  color: #999;
+}
+:root[data-theme=light] .lexical-root :global(.token.namespace) {
+  opacity: 0.7;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.property, .tag, .boolean, .number, .constant, .symbol, .deleted)) {
+  color: #905;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.selector, .attr-name, .string, .char, .builtin, .inserted)) {
+  color: #690;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.operator, .entity, .url)), :root[data-theme=light] .lexical-root :global(.language-css) :global(.token.string), :root[data-theme=light] .lexical-root :global(.style) :global(.token.string) {
+  color: #9a6e3a;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.atrule, .attr-value, .keyword)) {
+  color: #07a;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.function, .class-name)) {
+  color: #dd4a68;
+}
+:root[data-theme=light] .lexical-root :global(.token:is(.regex, .important, .variable)) {
+  color: #e90;
+}
+
+:root[data-theme=dark] .lexical-root :global(.token:is(.comment, .block-comment, .prolog, .doctype, .cdata)) {
+  color: #999;
+}
+:root[data-theme=dark] .lexical-root :global(.token.punctuation) {
+  color: #ccc;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.tag, .attr-name, .namespace, .deleted)) {
+  color: #e2777a;
+}
+:root[data-theme=dark] .lexical-root :global(.token.function-name) {
+  color: #6196cc;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.boolean, .number, .function)) {
+  color: #f08d49;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.property, .class-name, .constant, .symbol)) {
+  color: #f8c555;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.selector, .important, .atrule, .keyword, .builtin)) {
+  color: #cc99cd;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.string, .char, .attr-value, .regex, .variable)) {
+  color: #7ec699;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.operator, .entity, .url)) {
+  color: #67cdcc;
+}
+:root[data-theme=dark] .lexical-root :global(.token:is(.important, .bold)) {
+  font-weight: bold;
+}
+:root[data-theme=dark] .lexical-root :global(.token.italic) {
+  font-style: italic;
+}
+:root[data-theme=dark] .lexical-root :global(.token.entity) {
+  cursor: help;
+}
+:root[data-theme=dark] .lexical-root :global(.token.inserted) {
+  color: green;
+}</style>

package/dist/components/text-editor/text-editor.svelte

@@ -131,28 +131,21 @@
   </Toast>
 {/if}
 
-<style lang="scss">
-  .text-editor {
-    margin: var(--sui-focus-ring-width);
-    width: calc(100% - var(--sui-focus-ring-width) * 2);
-
-    &.flex:not([hidden]) {
-      display: block; // Avoid Tailwind .flex class collisions
-    }
-
-    :global {
-      .sui.text-area {
-        margin: 0 !important;
-        width: 100% !important;
-        min-width: auto;
-
-        textarea {
-          border-start-start-radius: 0 !important;
-          border-start-end-radius: 0 !important;
-          border-end-start-radius: var(--sui-textbox-border-radius) !important;
-          border-end-end-radius: var(--sui-textbox-border-radius) !important;
-        }
-      }
-    }
-  }
-</style>
+<style>.text-editor {
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
+}
+.text-editor.flex:not([hidden]) {
+  display: block;
+}
+.text-editor :global(.sui.text-area) {
+  margin: 0 !important;
+  width: 100% !important;
+  min-width: auto;
+}
+.text-editor :global(.sui.text-area) :global(textarea) {
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: var(--sui-textbox-border-radius) !important;
+  border-end-end-radius: var(--sui-textbox-border-radius) !important;
+}</style>

package/dist/components/text-editor/toolbar/toolbar-wrapper.svelte

@@ -34,48 +34,41 @@
   </Toolbar>
 </div>
 
-<style lang="scss">
-  .wrapper {
-    display: contents;
-
-    :global {
-      [role='toolbar'] {
-        position: sticky;
-        top: 0;
-        z-index: 100;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 4px;
-        border-width: 1px 1px 0;
-        border-style: solid;
-        border-color: var(--sui-textbox-border-color);
-        border-start-start-radius: var(--sui-textbox-border-radius);
-        border-start-end-radius: var(--sui-textbox-border-radius);
-        border-end-start-radius: 0;
-        border-end-end-radius: 0;
-        padding: 0 4px;
-        height: auto;
-        min-height: 40px;
-        background-color: var(--sui-tertiary-background-color);
-
-        @media (width < 768px) {
-          flex-wrap: wrap;
-          height: auto;
-        }
-      }
-
-      .sui.menu-button {
-        padding: 0 4px;
-      }
-
-      .sui.button {
-        flex: none;
-        margin: 0 !important;
-      }
-
-      .sui.button-group {
-        gap: 4px;
-      }
-    }
+<style>.wrapper {
+  display: contents;
+}
+.wrapper :global([role=toolbar]) {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  border-width: 1px 1px 0;
+  border-style: solid;
+  border-color: var(--sui-textbox-border-color);
+  border-start-start-radius: var(--sui-textbox-border-radius);
+  border-start-end-radius: var(--sui-textbox-border-radius);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  padding: 0 4px;
+  height: auto;
+  min-height: 40px;
+  background-color: var(--sui-tertiary-background-color);
+}
+@media (width < 768px) {
+  .wrapper :global([role=toolbar]) {
+    flex-wrap: wrap;
+    height: auto;
   }
-</style>
+}
+.wrapper :global(.sui.menu-button) {
+  padding: 0 4px;
+}
+.wrapper :global(.sui.button) {
+  flex: none;
+  margin: 0 !important;
+}
+.wrapper :global(.sui.button-group) {
+  gap: 4px;
+}</style>