Mirrors/catppuccin-palette
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: include sass in npm package

Browse source
This commit is contained in:
winston 2023-02-05 22:34:31 +01:00
parent 35a396683c
commit 7450f6f9d8
No known key found for this signature in database
GPG key ID: 3786770EDBC2B481
2 changed files with 66 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
package.json
View file

@ -1,51 +1,61 @@
{
"name": "@catppuccin/palette",
"version": "0.1.5",
"description": "Soothing pastel themes for the high-spirited!",
"main": "dist/index.js",
"module": "dist/index.mjs",
"exports": {
".": {
"require": "./dist/index.cjs",
"import": "./dist/index.mjs"
},
"./style": "./css/catppuccin.css"
},
"scripts": {
"test": "ava",
"build": "node esbuild.js",
"prepublishOnly": "npm run build"
},
"files": [
"css/",
"dist/index.cjs",
"dist/index.mjs",
"index.d.ts"
],
"types": "index.d.ts",
"repository": {
"type": "git",
"url": "git+https://github.com/catppuccin/palette.git"
},
"keywords": [
"pastel-colors",
"catppuccin",
"colors",
"theme",
"palette",
"soothing"
],
"publishConfig": {
"access": "public"
},
"author": "Catppuccin Org",
"license": "MIT",
"bugs": {
"url": "https://github.com/catppuccin/palette/issues"
},
"homepage": "https://github.com/catppuccin/palette#readme",
"devDependencies": {
"ava": "^4.2.0",
"esbuild": "^0.14.42"
}
"name": "@catppuccin/palette",
"version": "0.1.6",
"description": "Soothing pastel themes for the high-spirited!",
"main": "dist/index.js",
"module": "dist/index.mjs",
"exports": {
".": {
"require": "./dist/index.cjs",
"import": "./dist/index.mjs"
},
"./style": "./css/catppuccin.css"
},
"scripts": {
"test": "ava",
"build": "node esbuild.js",
"prepublishOnly": "npm run build"
},
"files": [
"css/*",
"dist/*",
"scss/*.scss",
"index.d.ts"
],
"types": "index.d.ts",
"repository": {
"type": "git",
"url": "git+https://github.com/catppuccin/palette.git"
},
"keywords": [
"pastel-colors",
"catppuccin",
"colors",
"theme",
"palette",
"soothing"
],
"publishConfig": {
"access": "public"
},
"author": "Catppuccin Org",
"license": "MIT",
"bugs": {
"url": "https://github.com/catppuccin/palette/issues"
},
"homepage": "https://github.com/catppuccin/palette#readme",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/catppuccin"
},
{
"type": "github",
"url": "https://github.com/sponsors/catppuccin"
}
],
"devDependencies": {
"ava": "^4.2.0",
"esbuild": "^0.14.42"
}
}

10
scss/README.md
View file

@ -4,12 +4,14 @@ There are two ways of using these Sass files:
## Import one-by-one
The easiest way to import a single flavour, is to use one of these 4 files:\
The easiest way to import a single flavor, is to use one of these 4 files:\
`_latte.scss`, `_frappe.scss`, `_macchiato.scss`, `_mocha.scss`
Input:
```scss
@import "mocha";
// sass is also part of the npm package:
// @use "~@catppuccin/palette/scss/catppuccin/mocha";
.my-mocha-class {
background: $base;
@ -30,7 +32,7 @@ Output:
Another way to create all four flavours, in a single file, from a single file,
is to use `_catppuccin.scss`.
**NB**: Due to websafe colours being predefined in CSS, colours like `red`, `green`, `blue` will **not** be generated with this method, **when they are not** explicitly cast as a string. To ensure proper generation, wrap your values with `'`.
**NB**: Due to websafe colors being predefined in CSS, colors like `red`, `green`, `blue` will **not** be generated with this method, **when they are not** explicitly cast as a string. To ensure proper generation, wrap your values with `'`.
In short:\
❌ Don't do this:
@ -42,10 +44,12 @@ Input:
```scss
@use "catppuccin";
// sass is also part of the npm package:
// @use "~@catppuccin/palette/scss/catppuccin";
@each $flavour, $colour in catppuccin.$palette {
.my-#{flavour}-class {
// you need surround the catppuccin colour names with quotes
// you need surround the catppuccin color names with quotes
background: map-get($colour, 'base');
color: map-get($colour, 'blue');
}