Skip to content

Commit 2e7d841

Browse files
CKGraficoCKGrafico
authored
Add new Theme Sketch (#70)
* add fonts to theme * Add stripped to buttons * Add avatar styles * Add other element styles * Export all themes in all platforms * init theme switcher * add importer function to switch * cancel theme switcher * fix index * add better explanation for themes * Update container.css * Fix #74 * update version
1 parent edf9d4c commit 2e7d841

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+631
-57
lines changed

‎.storybook/components/Customization.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@ export function Customization(props: CustomizationProps) {
4646
name: 'Papanasi',
4747
value: 'papanasi',
4848
css: `/papanasi.css?${performance.now()}`
49+
},
50+
{
51+
name: 'Sketch',
52+
value: 'sketch',
53+
css: `/sketch.css?${performance.now()}`
4954
}
5055
];
5156

‎compiler/compiler.tasks.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const optionDefinitions = [
7171
})
7272
},
7373
{
74-
title: `Compile Mitosis components: ${cliConfig.elements?.join(', ') || 'all'}`,
74+
title: `Compile Mitosis Elements: ${cliConfig.elements?.join(', ') || 'all'}`,
7575
task: () => {
7676
return new Listr(
7777
cliConfig.platforms.map((platform) => ({

‎compiler/themes.tasks.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const { Listr } = require('listr2');
22

33
(async () => {
44
const execa = (await import('execa')).command;
5-
const themes = ['papanasi'];
5+
const themes = ['papanasi', 'sketch'];
66

77
const tasks = new Listr([
88
{

‎docs/customization.stories.mdx

+12-1
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,22 @@ Our configured **Responsive Suffixes** are the same as our default breakpoints:
4646
--pa-breakpoint-xxl: 1920px; // @xxs`}
4747
></Code>
4848

49+
## Themes
50+
51+
To create a custom theme for your application is easy as create a `.css` file and override the `custom properties` or just add new css values to the `BEM Classes` explained above.
52+
53+
To help the user by default we are exporting our library without themes but there are also some default ones that you can use as base for your custom one, those are `papanasi.css`, `sketch.css`.
54+
55+
Import them as any other file in your project, for example in a `react` project you can import like this:
56+
57+
<Code language="javascript" code={`import "@papanasi/react/sketch.css";`}></Code>
58+
59+
4960
## CSS Custom Properties
5061

5162
We have defined a list of custom properties that we use to customize the components. You can easily override them in your project.
5263

53-
For example if we want to modify the **variants**, there are 3 different groups of properties and those are the ones from the basi theme called `papanasi.css`:
64+
For example if we want to modify the **variants**, there are 3 different groups of properties and those are the ones from the basic theme called `papanasi.css`:
5465

5566
<Code
5667
language="css"

‎hooks/post-install.hook.js

+15-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const mainPackageJson = require('../package.json');
44
const dependencies = mainPackageJson.dependencies;
55
const packagesJson = glob.sync(`./packages/**/package.json`);
66

7-
function copyMainPackageJsonDependencies(packageJson) {
7+
function copyMainDependencies(packageJson) {
88
const data = fs.readFileSync(packageJson, 'utf8');
99
const rawDependencies = Object.entries(dependencies)
1010
.map(([key, value]) => `\n "${key}": "${value}"`)
@@ -14,4 +14,17 @@ function copyMainPackageJsonDependencies(packageJson) {
1414
fs.writeFileSync(packageJson, result, 'utf8');
1515
}
1616

17-
packagesJson.forEach(copyMainPackageJsonDependencies);
17+
function copyThemes(packageJson) {
18+
const data = fs.readFileSync(packageJson, 'utf8');
19+
const rawDependencies = Object.entries(dependencies)
20+
.map(([key, value]) => `\n "${key}": "${value}"`)
21+
.join(',');
22+
const result = data.replace(/("dependencies": {)(.*)( },\r?\n? "peerDependencies)/gs, `$1${rawDependencies}\n$3`);
23+
24+
fs.writeFileSync(packageJson, result, 'utf8');
25+
}
26+
27+
packagesJson.forEach((packagesJson) => {
28+
copyMainDependencies(packagesJson);
29+
copyThemes(packagesJson);
30+
});

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "papanasi",
33
"private": true,
44
"license": "MIT",
5-
"version": "1.0.0",
5+
"version": "1.0.1",
66
"scripts": {
77
"compile": "node ./compiler",
88
"dev": "node ./compiler/dev.tasks",

‎packages/angular/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
244244
<strong>Code</strong> <br/>
245245
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
246246
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
247-
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
247+
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
248248
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
249249
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
250250
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

‎packages/angular/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
"import": "./dist/papanasi-angular.es.js",
1313
"require": "./dist/papanasi-angular.umd.js"
1414
},
15-
"./papanasi.css": {
16-
"import": "./dist/papanasi.css",
17-
"require": "./dist/papanasi.css"
15+
"./*.css": {
16+
"import": "./dist/themes/*.css",
17+
"require": "./dist/themes/*.css"
1818
}
1919
},
2020
"dependencies": {
@@ -32,7 +32,7 @@
3232
],
3333
"scripts": {
3434
"build": "rollup -c",
35-
"postbuild": "copyfiles ../../.themes/** ./dist/ --flat"
35+
"postbuild": "copyfiles ../../.themes/** ./dist/themes --flat"
3636
},
3737
"publishConfig": {
3838
"access": "public"

‎packages/preact/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
244244
<strong>Code</strong> <br/>
245245
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
246246
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
247-
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
247+
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
248248
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
249249
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
250250
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

‎packages/preact/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
"import": "./dist/papanasi-preact.es.js",
1313
"require": "./dist/papanasi-preact.umd.js"
1414
},
15-
"./papanasi.css": {
16-
"import": "./dist/papanasi.css",
17-
"require": "./dist/papanasi.css"
15+
"./*.css": {
16+
"import": "./dist/themes/*.css",
17+
"require": "./dist/themes/*.css"
1818
}
1919
},
2020
"dependencies": {
@@ -33,7 +33,7 @@
3333
"scripts": {
3434
"prebuild": "yarn install",
3535
"build": "rollup -c",
36-
"postbuild": "copyfiles ../../.themes/** ./dist/ --flat"
36+
"postbuild": "copyfiles ../../.themes/** ./dist/themes --flat"
3737
},
3838
"publishConfig": {
3939
"access": "public"

‎packages/qwik/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
244244
<strong>Code</strong> <br/>
245245
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
246246
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
247-
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
247+
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
248248
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
249249
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
250250
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

‎packages/qwik/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
"import": "./lib/style.css",
2020
"require": "./lib/style.css"
2121
},
22-
"./papanasi.css": {
23-
"import": "./lib/papanasi.css",
24-
"require": "./lib/papanasi.css"
22+
"./*.css": {
23+
"import": "./lib/themes/*.css",
24+
"require": "./lib/themes/*.css"
2525
}
2626
},
2727
"dependencies": {
@@ -43,7 +43,7 @@
4343
"build": "qwik build",
4444
"build.lib": "vite build --mode lib",
4545
"build.types": "tsc --emitDeclarationOnly",
46-
"postbuild": "copyfiles ../../.themes/** ./lib/ --flat"
46+
"postbuild": "copyfiles ../../.themes/** ./lib/themes --flat"
4747
},
4848
"publishConfig": {
4949
"access": "public"

‎packages/react/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
244244
<strong>Code</strong> <br/>
245245
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
246246
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
247-
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
247+
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
248248
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
249249
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
250250
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

‎packages/react/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
"import": "./dist/papanasi-react.es.js",
1313
"require": "./dist/papanasi-react.umd.js"
1414
},
15-
"./papanasi.css": {
16-
"import": "./dist/papanasi.css",
17-
"require": "./dist/papanasi.css"
15+
"./*.css": {
16+
"import": "./dist/themes/*.css",
17+
"require": "./dist/themes/*.css"
1818
}
1919
},
2020
"dependencies": {
@@ -34,7 +34,7 @@
3434
"scripts": {
3535
"prebuild": "yarn install",
3636
"build": "rollup -c",
37-
"postbuild": "copyfiles ../../.themes/** ./dist/ --flat"
37+
"postbuild": "copyfiles ../../.themes/** ./dist/themes --flat"
3838
},
3939
"publishConfig": {
4040
"access": "public"

‎packages/solid/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
244244
<strong>Code</strong> <br/>
245245
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
246246
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
247-
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
247+
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
248248
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
249249
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
250250
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

‎packages/solid/copy-css.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ const themesFiles = glob.sync(`../../.themes/**.css`);
1313
themesFiles.forEach((fileName) => {
1414
const file = path.parse(fileName);
1515

16-
fs.copySync(fileName, `./dist/${file.base}`);
16+
fs.copySync(fileName, `./dist/themes/${file.base}`);
1717
});

‎packages/solid/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
"require": "./dist/cjs/papanasi.js",
1717
"node": "./dist/cjs/papanasi.js"
1818
},
19-
"./papanasi.css": {
20-
"import": "./dist/papanasi.css",
21-
"require": "./dist/papanasi.css"
19+
"./*.css": {
20+
"import": "./dist/themes/*.css",
21+
"require": "./dist/themes/*.css"
2222
}
2323
},
2424
"dependencies": {

‎packages/svelte/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
244244
<strong>Code</strong> <br/>
245245
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
246246
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
247-
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
247+
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
248248
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
249249
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
250250
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

‎packages/svelte/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
"import": "./dist/index.js",
1515
"require": "./dist/index.js"
1616
},
17-
"./papanasi.css": {
18-
"import": "./papanasi.css",
19-
"require": "./papanasi.css"
17+
"./*.css": {
18+
"import": "./dist/themes/*.css",
19+
"require": "./dist/themes/*.css"
2020
}
2121
},
2222
"dependencies": {
@@ -36,7 +36,7 @@
3636
],
3737
"scripts": {
3838
"build": "svelte-kit sync && svelte-package",
39-
"postbuild": "copyfiles ../../.themes/** ./dist/ --flat"
39+
"postbuild": "copyfiles ../../.themes/** ./dist/themes --flat"
4040
},
4141
"publishConfig": {
4242
"access": "public"

‎packages/vue/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
244244
<strong>Code</strong> <br/>
245245
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
246246
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
247-
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
247+
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
248248
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
249249
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
250250
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

‎packages/vue/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
"import": "./dist/papanasi-vue.es.js",
1313
"require": "./dist/papanasi-vue.umd.js"
1414
},
15-
"./papanasi.css": {
16-
"import": "./dist/papanasi.css",
17-
"require": "./dist/papanasi.css"
15+
"./*.css": {
16+
"import": "./dist/themes/*.css",
17+
"require": "./dist/themes/*.css"
1818
}
1919
},
2020
"dependencies": {
@@ -32,7 +32,7 @@
3232
],
3333
"scripts": {
3434
"build": "rollup -c",
35-
"postbuild": "copyfiles ../../.themes/** ./dist/ --flat"
35+
"postbuild": "copyfiles ../../.themes/** ./dist/themes --flat"
3636
},
3737
"publishConfig": {
3838
"access": "public"

‎packages/webcomponents/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ This library born as a pet project to create universal components, easy to exten
244244
<strong>Code</strong> <br/>
245245
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
246246
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
247-
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
247+
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
248248
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
249249
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
250250
<img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />

‎packages/webcomponents/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
"import": "./dist/papanasi-webcomponents.es.js",
1313
"require": "./dist/papanasi-webcomponents.umd.js"
1414
},
15-
"./papanasi.css": {
16-
"import": "./dist/papanasi.css",
17-
"require": "./dist/papanasi.css"
15+
"./*.css": {
16+
"import": "./dist/themes/*.css",
17+
"require": "./dist/themes/*.css"
1818
},
1919
"./custom-elements.json": {
2020
"import": "./custom-elements.json",
@@ -30,7 +30,7 @@
3030
"dist"
3131
],
3232
"scripts": {
33-
"prebuild": "copyfiles ../../.themes/** ./dist/ --flat",
33+
"prebuild": "copyfiles ../../.themes/** ./dist/themes --flat",
3434
"build": "run-s build:**",
3535
"build:code": "rollup -c",
3636
"build:styles": "replace \"\\.pa-(.*?)((--|__).*?)?((\\.pa|\\.is|\\.has).*?)?(,|:|{)\" \"pa-$1::part(pa-$1$2 $4)$6\" ./dist -r --include=\"*.es.js,*.umd.js,*.css\"",

‎rollup.themes.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ module.exports = () => {
2121
sourcemap: 'inline'
2222
}
2323
],
24-
plugins: [postcss({ ...postcssConfig, inject: false, extract: 'papanasi.css' })]
24+
plugins: [postcss({ ...postcssConfig, inject: false, extract: `${cliConfig.theme}.css` })]
2525
}
2626
];
2727
};

‎src/elements/components/avatar/avatar.css

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
display: inline-flex;
55

66
&__container {
7+
background-color: var(--pa-avatar-background);
8+
color: var(--pa-avatar-foreground);
79
display: inline-flex;
810
justify-content: center;
911
align-items: center;

‎src/elements/components/avatar/avatar.service.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ class AvatarService {
4747
debug(`AvatarService getColor: color: ${JSON.stringify(color)}`);
4848

4949
return {
50-
color: color.foreground,
51-
'background-color': color.background
50+
'--pa-avatar-foreground': color.foreground,
51+
'--pa-avatar-background': color.background
5252
};
5353
}
5454

‎src/elements/layout/container/container.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.pa-container {
44
width: 100%;
5-
max-width: var(--pa-grid-container-max-width);
5+
max-width: var(--pa-grid-max-width);
66

77
&--fluid {
88
max-width: 100%;

‎src/styles/themes/papanasi/avatar.css

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
&__container {
1212
border-radius: var(--pa-avatar-radius);
1313
box-sizing: border-box;
14+
font-family: var(--pa-font-family);
1415
font-weight: var(--pa-avatar-initials-weight);
1516
height: var(--pa-avatar-size);
1617
padding: var(--pa-avatar-padding);
@@ -19,8 +20,8 @@
1920

2021
@each $variant in primary, secondary, tertiary {
2122
&--$(variant) &__container {
22-
background-color: var(--pa-color-$(variant)-normal);
23-
color: var(--pa-color-basic-brightest);
23+
--pa-avatar-background: var(--pa-color-$(variant)-normal);
24+
--pa-avatar-foreground: var(--pa-color-basic-brightest);
2425
}
2526
}
2627

0 commit comments

Comments
 (0)