@scalar/themes - npm Package Compare versions

Comparing version 0.9.61 to 0.9.62

CHANGELOG.md

		# @scalar/themes

		## 0.9.62

		### Patch Changes

		- 776a4e2: docs(themes): update themes readme
		- 2ed681b: feat: adds reset outline offset for button
		- 4f12fe4: feat(themes): add scalar danger color
		- Updated dependencies [702c386]
		- Updated dependencies [f1f39b0]
		- @scalar/types@0.0.28

		## 0.9.61
		@@ -4,0 +15,0 @@

dist/presets/default.css2.js

		@@ -59,2 +59,8 @@ const a = `/* basic theme */
		--scalar-button-1-color: rgba(255, 255, 255, 0.9);

		--scalar-danger-color: color-mix(
		in srgb,
		var(--scalar-color-red),
		var(--scalar-color-1) 20%
		);
		}
		@@ -72,2 +78,8 @@ .dark-mode {
		--scalar-button-1-color: black;

		--scalar-danger-color: color-mix(
		in srgb,
		var(--scalar-color-red),
		var(--scalar-background-1) 20%
		);
		}
		@@ -74,0 +86,0 @@ `;

dist/tailwind.d.ts

		@@ -182,2 +182,3 @@ /** Scalar Tailwind Preset */
		btn: string;
		danger: string;
		};
		@@ -184,0 +185,0 @@ h: {

dist/tailwind.js

		@@ -71,3 +71,4 @@ import r from "./pixelPreset.js";
		disabled: "var(--scalar-color-disabled)",
		btn: "var(--scalar-button-1-color)"
		btn: "var(--scalar-button-1-color)",
		danger: "var(--scalar-danger-color)"
		},
		@@ -74,0 +75,0 @@ // Hover Colors

package.json

		@@ -18,3 +18,3 @@ {
		],
		"version": "0.9.61",
		"version": "0.9.62",
		"engines": {
		@@ -49,3 +49,3 @@ "node": ">=18"
		"dependencies": {
		"@scalar/types": "0.0.27"
		"@scalar/types": "0.0.28"
		},
		@@ -52,0 +52,0 @@ "devDependencies": {

README.md

		@@ -8,20 +8,85 @@ # Scalar Themes

		Scalar Themes provides a library of themes for all Scalar products and components. It also contains the base set of Scalar CSS variables and an associated [Tailwind](https://tailwindcss.com) preset which leverages those variables.

		To see a list of available themes, see the [`presets`](./src/index.ts#L65) export.

		## CSS Layers

		The themes package uses two [CSS Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to apply the theme styles

		- `scalar-base`: A copy of the core Scalar CSS variables and default theme
		- `scalar-theme`: Optionally overrides `scalar-base` with theme styles

		Any styles added outside of these layers will override all the styles in the layers which allows you to extend or customize a theme.

		## Scoping

		Because many Scalar applications are embedded into other websites the reset is scoped to the `scalar-app` class. This means you need to add this class to the root element of your application where you want the theme to apply. If you are using the themes in a standalone application, you can just add this class to the `body` element.

		```html
		<body class="scalar-app">
		<!-- Your application content -->
		</body>
		```

		## Installation

		```bash
		npm install @scalar/themes
		pnpm i @scalar/themes
		```

		## Themes
		### Usage via CSS Import (Basic)

		The following themes are available:
		To import the basic theme styles into your project, you can just import `style.css` which imports the reset, scrollbars, and a copy of the base [Scalar CSS variables](./src/variables.css) and [default theme](./src/presets/default.css).

		- `default` (which is the … default)
		- `alternate`
		- `moon`
		- `purple`
		- `solarized`
		```ts
		import '@scalar/themes/styles.css'
		```

		And if you don’t want to load any theme:
		To add a theme, you can import the theme from the presets directory.

		- `none`
		```ts
		import '@scalar/themes/presets/alternate.css'
		```

		### Usage via JavaScript

		To use the themes package via JavaScript, you can use the [`getThemeStyles`](./src/index.ts#L123) function from the package. The function will generate CSS style string which you can then add to the head of your document.

		```ts
		import { getThemeStyles } from '@scalar/themes'

		const styles = getThemeStyles('alternate', { layer: 'scalar-theme' })
		document.head.insertAdjacentHTML('beforeend', `<style>${styles}</style>`)
		```

		The function allows you to pass in a theme ID and an optional options object to configure the layer (default: `scalar-theme`) and whether to include the default fonts (default: `true`).

		### Usage via Tailwind

		To use the themes package with Tailwind, you first need to inject the import the styles either via CSS or JavaScript (see above). You can also import them alongside your global Tailwind styles.

		```css
		@import '@scalar/themes/style.css';
		@tailwind components;
		@tailwind utilities;
		@tailwind variants;
		```

		Then you can use the [tailwind preset](https://tailwindcss.com/docs/presets) in your `tailwind.config.js` to expose the [theme colors and variables](./src/tailwind.ts).

		```ts
		import scalarPreset from '@scalar/themes/tailwind'
		import { type Config } from 'tailwindcss'

		export default {
		presets: [scalarPreset],
		// Your tailwind config
		theme: {
		extend: {
		// Extend the preset
		},
		// Override the preset
		},
		} satisfies Config
		```

src/tailwind.ts

		@@ -77,2 +77,3 @@ import type { Config } from 'tailwindcss'
		btn: 'var(--scalar-button-1-color)',
		danger: 'var(--scalar-danger-color)',
		},
		@@ -79,0 +80,0 @@

dist/presets/default.css