@lumis-sh/themes 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [0.2.0](https://github.com/leandrocp/lumis/compare/npm-themes/v0.1.0...npm-themes/v0.2.0) (2026-06-16)
+
+### ⚠ BREAKING CHANGES
+
+- adopt the `l-` prefix on token class [#952](https://github.com/leandrocp/lumis/pull/952)
+
+### Features
+
+- rainbow brackets - [#949](https://github.com/leandrocp/lumis/pull/949)
+- css stylesheet builder - [#951](https://github.com/leandrocp/lumis/pull/951)
+
 ## [0.1.0](https://github.com/leandrocp/lumis/compare/npm-themes/v0.0.3...npm-themes/v0.1.0) (2026-04-22)
 
 Promote to v0.1.0

package/README.md

@@ -22,6 +22,10 @@ import dracula from '@lumis-sh/themes/dracula'
 https://unpkg.com/@lumis-sh/themes/dist/json/dracula.json
 ```
 
+### Build custom CSS
+
+Use `buildCss(theme, options)` to build a stylesheet you can inline or scope. See [CSS Builder](https://lumis.sh/docs/themes/css-builder).
+
 ## Browse
 
 - CSS: https://unpkg.com/browse/@lumis-sh/themes/dist/css/

package/dist/_tsup-dts-rollup.d.cts

@@ -1,3 +1,46 @@
+/**
+ * Build a CSS stylesheet for a theme.
+ *
+ * Most applications can use the bundled CSS files from `@lumis-sh/themes/css/*`,
+ * but this is useful when CSS needs to be embedded, scoped, or customized, for
+ * example to scope a dark theme under a `data-theme` selector.
+ *
+ * ```ts
+ * import { buildCss } from '@lumis-sh/themes'
+ * import githubDark from '@lumis-sh/themes/github_dark'
+ *
+ * const css = buildCss(githubDark, {
+ *   scope: 'html[data-theme="dark"]',
+ *   containerSelector: '.lumis',
+ *   containerStyle: [
+ *     ['background-color', 'var(--code-background)'],
+ *     ['border-radius', '0.375rem'],
+ *     ['padding', '1rem'],
+ *   ],
+ * })
+ * ```
+ */
+declare function buildCss(theme: ThemeData, options?: BuildCssOptions): string;
+export { buildCss }
+export { buildCss as buildCss_alias_1 }
+
+/** Options for {@link buildCss}. */
+declare interface BuildCssOptions {
+    /** Whether italic theme styles should be emitted. Defaults to `true`. */
+    enableItalic?: boolean;
+    /** Parent selector prepended to every generated selector. Defaults to `""`. */
+    scope?: string;
+    /** Selector used for the container code block rule. Defaults to `".lumis"`. */
+    containerSelector?: string;
+    /**
+     * Extra `[property, value]` declarations for the container code block rule. A property that matches
+     * one the theme already sets (`color`, `background-color`) replaces that value instead of duplicating it.
+     */
+    containerStyle?: [string, string][];
+}
+export { BuildCssOptions }
+export { BuildCssOptions as BuildCssOptions_alias_1 }
+
 export declare const default_alias: ThemeData;
 
 export declare const default_alias_1: ThemeData;

package/dist/_tsup-dts-rollup.d.ts

@@ -1,3 +1,46 @@
+/**
+ * Build a CSS stylesheet for a theme.
+ *
+ * Most applications can use the bundled CSS files from `@lumis-sh/themes/css/*`,
+ * but this is useful when CSS needs to be embedded, scoped, or customized, for
+ * example to scope a dark theme under a `data-theme` selector.
+ *
+ * ```ts
+ * import { buildCss } from '@lumis-sh/themes'
+ * import githubDark from '@lumis-sh/themes/github_dark'
+ *
+ * const css = buildCss(githubDark, {
+ *   scope: 'html[data-theme="dark"]',
+ *   containerSelector: '.lumis',
+ *   containerStyle: [
+ *     ['background-color', 'var(--code-background)'],
+ *     ['border-radius', '0.375rem'],
+ *     ['padding', '1rem'],
+ *   ],
+ * })
+ * ```
+ */
+declare function buildCss(theme: ThemeData, options?: BuildCssOptions): string;
+export { buildCss }
+export { buildCss as buildCss_alias_1 }
+
+/** Options for {@link buildCss}. */
+declare interface BuildCssOptions {
+    /** Whether italic theme styles should be emitted. Defaults to `true`. */
+    enableItalic?: boolean;
+    /** Parent selector prepended to every generated selector. Defaults to `""`. */
+    scope?: string;
+    /** Selector used for the container code block rule. Defaults to `".lumis"`. */
+    containerSelector?: string;
+    /**
+     * Extra `[property, value]` declarations for the container code block rule. A property that matches
+     * one the theme already sets (`color`, `background-color`) replaces that value instead of duplicating it.
+     */
+    containerStyle?: [string, string][];
+}
+export { BuildCssOptions }
+export { BuildCssOptions as BuildCssOptions_alias_1 }
+
 export declare const default_alias: ThemeData;
 
 export declare const default_alias_1: ThemeData;

package/dist/css/adwaita_dark.css

@@ -1,353 +1,345 @@
 /* adwaita_dark
- * revision: 93f3bed009f7fc4c57f8d710880b6cab9e0b0d15
+ * revision: c607954f7b2cf56b24e921db0dab4749f3430a22
  */
-
-pre.lumis {
+.lumis {
   color: #deddda;
   background-color: #1d1d20;
 }
-.attribute {
+.l-attribute {
   color: #e66100;
 }
-.attribute-builtin {
+.l-attribute-builtin {
   color: #62a0ea;
 }
-.boolean {
+.l-boolean {
   color: #c061cb;
   font-weight: bold;
 }
-.character {
+.l-character {
   color: #33b2a4;
 }
-.character-special {
+.l-character-special {
   color: #62a0ea;
 }
-.comment {
+.l-comment {
   color: #5e5e5e;
 }
-.comment-documentation {
+.l-comment-documentation {
   color: #5e5e5e;
 }
-.comment-error {
+.l-comment-error {
   color: #ed333b;
 }
-.comment-hint {
+.l-comment-hint {
   color: #5e5e5e;
 }
-.comment-note {
+.l-comment-note {
   color: #218787;
 }
-.comment-todo {
+.l-comment-todo {
   color: #f8e45c;
   font-weight: bold;
 }
-.comment-warning {
+.l-comment-warning {
   color: #d38b09;
 }
-.constant {
+.l-constant {
   color: #7d8ac7;
 }
-.constant-builtin {
+.l-constant-builtin {
   color: #7d8ac7;
   font-weight: bold;
 }
-.constant-macro {
+.l-constant-macro {
   color: #ffa348;
   font-weight: bold;
 }
-.constructor {
+.l-constructor {
   color: #deddda;
 }
-.diff-delta {
+.l-diff-delta {
   color: #ff7800;
   background-color: #1d1d20;
 }
-.diff-minus {
+.l-diff-minus {
   color: #f66151;
   background-color: #1d1d20;
 }
-.diff-plus {
+.l-diff-plus {
   color: #33b2a4;
   background-color: #1d1d20;
 }
-.error {
+.l-error {
   color: #e01b24;
 }
-.function {
-  color: #deddda;
-}
-.function-builtin {
+.l-function {
   color: #4e9a06;
 }
-.function-call {
-  color: #deddda;
+.l-function-builtin {
+  color: #4e9a06;
 }
-.function-call-zig {
+.l-function-call {
   color: #4e9a06;
 }
-.function-macro {
+.l-function-macro {
   color: #4e9a06;
   font-weight: bold;
 }
-.function-method {
-  color: #deddda;
+.l-function-method {
+  color: #4e9a06;
 }
-.function-method-call {
+.l-function-method-call {
   color: #4e9a06;
 }
-.highlighted {
+.l-highlighted {
   background-color: #242428;
 }
-.keyword {
+.l-keyword {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-conditional {
+.l-keyword-conditional {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-conditional-ternary {
+.l-keyword-conditional-ternary {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-coroutine {
+.l-keyword-coroutine {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-debug {
+.l-keyword-debug {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-directive {
+.l-keyword-directive {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-directive-define {
+.l-keyword-directive-define {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-exception {
+.l-keyword-exception {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-export {
+.l-keyword-export {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-function {
+.l-keyword-function {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-import {
+.l-keyword-import {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-modifier {
+.l-keyword-modifier {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-operator {
+.l-keyword-operator {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-repeat {
+.l-keyword-repeat {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-return {
+.l-keyword-return {
   color: #ffa348;
   font-weight: bold;
 }
-.keyword-type {
+.l-keyword-type {
   color: #ffa348;
   font-weight: bold;
 }
-.label {
+.l-label {
   color: #c061cb;
 }
-.markup {
+.l-markup {
   color: #62a0ea;
 }
-.markup-environment {
+.l-markup-environment {
   color: #62a0ea;
 }
-.markup-environment-name {
+.l-markup-environment-name {
   color: #62a0ea;
 }
-.markup-heading {
+.l-markup-heading {
   color: #5bc8af;
   font-weight: bold;
 }
-.markup-heading-1 {
+.l-markup-heading-1 {
   color: #5bc8af;
   font-weight: bold;
 }
-.markup-heading-2 {
+.l-markup-heading-2 {
   color: #5bc8af;
   font-weight: bold;
 }
-.markup-heading-3 {
+.l-markup-heading-3 {
   color: #5bc8af;
   font-weight: bold;
 }
-.markup-heading-4 {
+.l-markup-heading-4 {
   color: #5bc8af;
   font-weight: bold;
 }
-.markup-heading-5 {
+.l-markup-heading-5 {
   color: #5bc8af;
   font-weight: bold;
 }
-.markup-heading-6 {
+.l-markup-heading-6 {
   color: #5bc8af;
   font-weight: bold;
 }
-.markup-italic {
+.l-markup-italic {
   font-style: italic;
 }
-.markup-link {
+.l-markup-link {
   text-decoration: underline;
 }
-.markup-link-label {
+.l-markup-link-label {
   color: #ed333b;
 }
-.markup-link-url {
+.l-markup-link-url {
   color: #62a0ea;
 }
-.markup-list {
+.l-markup-list {
   color: #62a0ea;
 }
-.markup-list-checked {
+.l-markup-list-checked {
   color: #f8e45c;
   font-weight: bold;
 }
-.markup-list-markdown {
+.l-markup-list-markdown {
   color: #e66100;
   font-weight: bold;
 }
-.markup-list-unchecked {
+.l-markup-list-unchecked {
   color: #f8e45c;
   font-weight: bold;
 }
-.markup-math {
+.l-markup-math {
   color: #62a0ea;
 }
-.markup-quote {
+.l-markup-quote {
   color: #62a0ea;
 }
-.markup-raw {
+.l-markup-raw {
   color: #7d8ac7;
 }
-.markup-raw-block {
+.l-markup-raw-block {
   color: #7d8ac7;
 }
-.markup-strikethrough {
+.l-markup-strikethrough {
   text-decoration: line-through;
 }
-.markup-strong {
+.l-markup-strong {
   font-weight: bold;
 }
-.markup-underline {
+.l-markup-underline {
   text-decoration: underline;
 }
-.module {
+.l-module {
   color: #5bc8af;
   font-weight: bold;
 }
-.module-builtin {
+.l-module-builtin {
   color: #62a0ea;
 }
-.namespace {
+.l-namespace {
   color: #ffa348;
 }
-.normal {
-  color: #deddda;
-  background-color: #1d1d20;
-}
-.number {
+.l-number {
   color: #4e57ba;
 }
-.number-float {
+.l-number-float {
   color: #33b2a4;
 }
-.operator {
+.l-operator {
   color: #c061cb;
 }
-.property {
+.l-property {
   color: #deddda;
 }
-.punctuation-bracket {
+.l-punctuation-bracket {
   color: #deddda;
 }
-.punctuation-delimiter {
+.l-punctuation-delimiter {
   color: #deddda;
 }
-.punctuation-special {
+.l-punctuation-special {
   color: #5bc8af;
 }
-.string {
+.l-string {
   color: #5bc8af;
 }
-.string-documentation {
+.l-string-documentation {
   color: #5bc8af;
 }
-.string-escape {
+.l-string-escape {
   color: #62a0ea;
 }
-.string-regex {
+.l-string-regex {
   color: #c061cb;
 }
-.string-regexp {
+.l-string-regexp {
   color: #62a0ea;
 }
-.string-special {
+.l-string-special {
   color: #62a0ea;
 }
-.string-special-path {
+.l-string-special-path {
   color: #62a0ea;
 }
-.string-special-symbol {
+.l-string-special-symbol {
   color: #62a0ea;
 }
-.string-special-url {
+.l-string-special-url {
   text-decoration: underline;
 }
-.tag {
+.l-tag {
   color: #5bc8af;
 }
-.tag-attribute {
+.l-tag-attribute {
   color: #ffa348;
 }
-.tag-builtin {
+.l-tag-builtin {
   color: #62a0ea;
 }
-.tag-delimiter {
+.l-tag-delimiter {
   color: #deddda;
 }
-.type {
-  color: #deddda;
+.l-type {
+  color: #5bc8af;
 }
-.type-builtin {
+.l-type-builtin {
   color: #5bc8af;
   font-weight: bold;
 }
-.type-definition {
+.l-type-definition {
   color: #5bc8af;
   font-weight: bold;
 }
-.variable {
+.l-variable {
   color: #deddda;
 }
-.variable-builtin {
+.l-variable-builtin {
   color: #ffa348;
   font-weight: bold;
 }
-.variable-member {
+.l-variable-member {
   color: #deddda;
 }
-.variable-parameter {
+.l-variable-parameter {
   color: #deddda;
 }
-.variable-parameter-builtin {
+.l-variable-parameter-builtin {
   color: #62a0ea;
 }