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", "name": "@catppuccin/palette",
"version": "0.1.5", "version": "0.1.6",
"description": "Soothing pastel themes for the high-spirited!", "description": "Soothing pastel themes for the high-spirited!",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/index.mjs", "module": "dist/index.mjs",
"exports": { "exports": {
".": { ".": {
"require": "./dist/index.cjs", "require": "./dist/index.cjs",
"import": "./dist/index.mjs" "import": "./dist/index.mjs"
}, },
"./style": "./css/catppuccin.css" "./style": "./css/catppuccin.css"
}, },
"scripts": { "scripts": {
"test": "ava", "test": "ava",
"build": "node esbuild.js", "build": "node esbuild.js",
"prepublishOnly": "npm run build" "prepublishOnly": "npm run build"
}, },
"files": [ "files": [
"css/", "css/*",
"dist/index.cjs", "dist/*",
"dist/index.mjs", "scss/*.scss",
"index.d.ts" "index.d.ts"
], ],
"types": "index.d.ts", "types": "index.d.ts",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/catppuccin/palette.git" "url": "git+https://github.com/catppuccin/palette.git"
}, },
"keywords": [ "keywords": [
"pastel-colors", "pastel-colors",
"catppuccin", "catppuccin",
"colors", "colors",
"theme", "theme",
"palette", "palette",
"soothing" "soothing"
], ],
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },
"author": "Catppuccin Org", "author": "Catppuccin Org",
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/catppuccin/palette/issues" "url": "https://github.com/catppuccin/palette/issues"
}, },
"homepage": "https://github.com/catppuccin/palette#readme", "homepage": "https://github.com/catppuccin/palette#readme",
"devDependencies": { "funding": [
"ava": "^4.2.0", {
"esbuild": "^0.14.42" "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 ## 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` `_latte.scss`, `_frappe.scss`, `_macchiato.scss`, `_mocha.scss`
Input: Input:
```scss ```scss
@import "mocha"; @import "mocha";
// sass is also part of the npm package:
// @use "~@catppuccin/palette/scss/catppuccin/mocha";
.my-mocha-class { .my-mocha-class {
background: $base; background: $base;
@ -30,7 +32,7 @@ Output:
Another way to create all four flavours, in a single file, from a single file, Another way to create all four flavours, in a single file, from a single file,
is to use `_catppuccin.scss`. 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:\ In short:\
❌ Don't do this: ❌ Don't do this:
@ -42,10 +44,12 @@ Input:
```scss ```scss
@use "catppuccin"; @use "catppuccin";
// sass is also part of the npm package:
// @use "~@catppuccin/palette/scss/catppuccin";
@each $flavour, $colour in catppuccin.$palette { @each $flavour, $colour in catppuccin.$palette {
.my-#{flavour}-class { .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'); background: map-get($colour, 'base');
color: map-get($colour, 'blue'); color: map-get($colour, 'blue');
} }