Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[project] allow auto-injecting styles + add CSS property prefix #182

Merged
merged 5 commits into from
Nov 5, 2024
Merged

[project] allow auto-injecting styles + add CSS property prefix #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3d91c65
feat: allow auto-injecting atable styles
Nov 5, 2024
d3417e7
feat: allow auto-injecting aform styles
Nov 5, 2024
c1c2105
feat: allow auto-injecting beam styles
Nov 5, 2024
83c40c4
feat: add prefix to custom CSS properties
Nov 5, 2024
cdf562a
fix: add changelogs
Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion aform/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
},
"require": "./dist/aform.umd.cjs"
},
"./styles": "./dist/style.css"
"./styles": "./dist/assets/index.css"
},
"typings": "./dist/aform/src/index.d.ts",
"files": [
Expand Down Expand Up @@ -64,6 +64,7 @@
"jsdom": "^25.0.0",
"stonecrop-rig": "workspace:*",
"typescript": "^5.5.2",
"vite-plugin-lib-inject-css": "^2.1.1",
"vite": "^5.4.5",
"vitest": "^2.1.1",
"vue-router": "^4.4.0"
Expand Down
2 changes: 1 addition & 1 deletion aform/src/components/AForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,5 +68,5 @@ const childModels = computed({
</script>

<style scoped>
@import url('@/theme/aform.css');
@import url('@stonecrop/themes/default.css');
</style>
8 changes: 4 additions & 4 deletions aform/src/components/form/ADate.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ div {
input {
width: calc(100% - 1ch);
outline: 1px solid transparent;
border: 1px solid var(--input-border-color);
border: 1px solid var(--sc-input-border-color);
padding: 1ch 0.5ch 0.5ch 1ch;
margin: calc(1.15rem / 2) 0 0 0;
min-height: 1.15rem;
Expand All @@ -62,7 +62,7 @@ input {

p,
label {
color: var(--input-label-color);
color: var(--sc-input-label-color);
display: block;
min-height: 1.15rem;
padding: 0rem;
Expand All @@ -87,10 +87,10 @@ label {
}

input:focus {
border: 1px solid var(--input-active-border-color);
border: 1px solid var(--sc-input-active-border-color);
}

input:focus + label {
color: var(--input-active-label-color);
color: var(--sc-input-active-label-color);
}
</style>
1 change: 0 additions & 1 deletion aform/src/components/form/ADatePicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,5 +158,4 @@ useKeyboardNav([
<style>
@import url('@stonecrop/themes/default.css');
@import url('@/theme/adate.css');
@import url('@/theme/aform.css');
</style>
8 changes: 4 additions & 4 deletions aform/src/components/form/ADropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,15 +136,15 @@ const onEnter = () => {
input {
width: calc(100% - 1ch);
outline: 1px solid transparent;
border: 1px solid var(--input-border-color);
border: 1px solid var(--sc-input-border-color);
padding: 1ch 0.5ch 0.5ch 1ch;
margin: calc(1.15rem / 2) 0 0 0;
min-height: 1.15rem;
border-radius: 0.25rem;
}

input:focus {
border: 1px solid var(--input-active-border-color);
border: 1px solid var(--sc-input-active-border-color);
border-radius: 0.25rem 0.25rem 0 0;
border-bottom: none;
}
Expand All @@ -171,7 +171,7 @@ label {
padding: 0;
margin: 0;
color: #000000;
border: 1px solid var(--input-active-border-color);
border: 1px solid var(--sc-input-active-border-color);
border-radius: 0 0 0.25rem 0.25rem;
border-top: none;
}
Expand All @@ -185,7 +185,7 @@ label {

.autocomplete-result.is-active,
.autocomplete-result:hover {
background-color: var(--row-color-zebra-light);
background-color: var(--sc-row-color-zebra-light);
color: #000000;
}
</style>
2 changes: 1 addition & 1 deletion aform/src/components/form/AFieldset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ fieldset {
width: 100%;
margin-right: 2ch;
border: 1px solid transparent;
border-bottom: 1px solid var(--gray-50);
border-bottom: 1px solid var(--sc-gray-50);
}

legend {
Expand Down
8 changes: 4 additions & 4 deletions aform/src/theme/adate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.adatepicker {
font-size: var(--table-font-size);
font-size: var(--sc-table-font-size);
display: inline-table;
color: var(--cell-text-color);
color: var(--sc-cell-text-color);
outline: none;
border-collapse: collapse;
/* width: calc(100% - 4px); */
Expand Down Expand Up @@ -32,7 +32,7 @@
}
.adatepicker .selectedDate {
outline: 1px solid black;
background: var(--gray-20);
background: var(--sc-gray-20);
font-weight: bolder;
}

Expand All @@ -45,5 +45,5 @@
font-weight: bold;
}
.prev-date {
color: var(--gray-20);
color: var(--sc-gray-20);
}
1 change: 0 additions & 1 deletion aform/src/theme/aform.css
View file
Open in desktop

This file was deleted.

16 changes: 8 additions & 8 deletions aform/src/theme/fields.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
}
.input-field {
outline: 1px solid transparent;
border: 1px solid var(--input-border-color);
border: 1px solid var(--sc-input-border-color);
padding: 0.25rem;
margin: 0 0 0 0;
border-radius: 0 0 0.25rem 0.25rem;
box-sizing: border-box;
width: 100%;
}
.field-label {
color: var(--input-label-color);
color: var(--sc-input-label-color);
display: block;
min-height: 1.15rem;
padding: 0.25rem;
Expand All @@ -28,8 +28,8 @@
background: white;
width: 100%;
box-sizing: border-box;
background: var(--gray-5);
border: 1px solid var(--input-border-color);
background: var(--sc-gray-5);
border: 1px solid var(--sc-input-border-color);
border-bottom: none;
}
p.error {
Expand All @@ -40,16 +40,16 @@ p.error {
margin: 0.5rem 0 0.25rem 0rem;
border: 1px solid transparent;
width: 100%;
color: var(--brand-danger);
color: var(--sc-brand-danger);
font-size: 0.8rem;
}

.input-field:focus {
border: 1px solid var(--input-active-border-color);
border: 1px solid var(--sc-input-active-border-color);
}

.input-field:focus + .field-label {
color: var(--input-active-label-color);
color: var(--sc-input-active-label-color);
}

/** CHECKBOX **/
Expand Down Expand Up @@ -80,5 +80,5 @@ p.error {
}

.checkbox-container:hover + .field-label {
color: var(--input-active-label-color);
color: var(--sc-input-active-label-color);
}
4 changes: 2 additions & 2 deletions aform/src/theme/purple_theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

:root {
--primary-color: #645caa;
--sc-primary-color: #645caa;
}

:root [data-theme='purple'] {
--row-color-zebra-light: #ebc7e8;
--sc-row-color-zebra-light: #ebc7e8;
}
5 changes: 4 additions & 1 deletion aform/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { libInjectCss } from 'vite-plugin-lib-inject-css'
import { coverageConfigDefaults, defineConfig } from 'vitest/config'

const projectRootDir = resolve(__dirname)

export default defineConfig({
plugins: [vue()],
plugins: [vue(), libInjectCss()],
resolve: {
alias: {
'@': resolve(projectRootDir, 'src'),
Expand All @@ -24,6 +25,8 @@ export default defineConfig({
rollupOptions: {
external: ['vue'],
output: {
chunkFileNames: 'chunks/[name].[hash].js',
assetFileNames: 'assets/[name].[ext]',
globals: {
vue: 'Vue',
},
Expand Down
6 changes: 5 additions & 1 deletion atable/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,16 @@
},
"require": "./dist/atable.umd.cjs"
},
"./styles": "./dist/style.css"
"./styles": "./dist/assets/index.css"
},
"typings": "./dist/atable/src/index.d.ts",
"files": [
"dist/*",
"src/*"
],
"sideEffects": [
"**/*.css"
],
"scripts": {
"prepublish": "heft build && vite build && rushx docs",
"build": "heft build && vite build && rushx docs",
Expand Down Expand Up @@ -64,6 +67,7 @@
"jsdom": "^25.0.0",
"stonecrop-rig": "workspace:*",
"typescript": "^5.5.2",
"vite-plugin-lib-inject-css": "^2.1.1",
"vite": "^5.4.5",
"vitest": "^2.1.1",
"vue-router": "^4.4.0"
Expand Down
2 changes: 1 addition & 1 deletion atable/src/components/ATable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,6 @@ window.addEventListener('keydown', (event: KeyboardEvent) => {
})
</script>

<style>
<style scoped>
@import url('@stonecrop/themes/default.css');
</style>
5 changes: 4 additions & 1 deletion atable/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { libInjectCss } from 'vite-plugin-lib-inject-css'
import { coverageConfigDefaults, defineConfig } from 'vitest/config'

const projectRootDir = resolve(__dirname)

export default defineConfig({
plugins: [vue()],
plugins: [vue(), libInjectCss()],
resolve: {
alias: {
'@': resolve(projectRootDir, 'src'),
Expand All @@ -29,6 +30,8 @@ export default defineConfig({
rollupOptions: {
external: ['vue'],
output: {
chunkFileNames: 'chunks/[name].[hash].js',
assetFileNames: 'assets/[name].[ext]',
globals: {
vue: 'Vue',
},
Expand Down
3 changes: 2 additions & 1 deletion beam/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"import": "./dist/beam.js",
"require": "./dist/beam.umd.cjs"
},
"./styles": "./dist/style.css"
"./styles": "./dist/assets/index.css"
},
"main": "dist/beam.js",
"module": "dist/beam.js",
Expand Down Expand Up @@ -59,6 +59,7 @@
"sass": "^1.75.0",
"stonecrop-rig": "workspace:*",
"typescript": "^5.5.2",
"vite-plugin-lib-inject-css": "^2.1.1",
"vite": "^5.4.5",
"vitest": "^2.1.1",
"vue-router": "^4.4.0"
Expand Down
Loading
Loading