From 83c40c429d168f605aafa693843b58ce10a94c56 Mon Sep 17 00:00:00 2001 From: Rohan Bansal Date: Tue, 5 Nov 2024 17:19:42 +0530 Subject: [PATCH] feat: add prefix to custom CSS properties --- aform/src/components/form/ADate.vue | 8 +-- aform/src/components/form/ADropdown.vue | 8 +-- aform/src/components/form/AFieldset.vue | 2 +- aform/src/theme/adate.css | 8 +-- aform/src/theme/fields.css | 16 ++--- aform/src/theme/purple_theme.css | 4 +- beam/themes/beam.css | 66 +++++++++--------- code_editor/src/theme/purple_theme.css | 4 +- examples/aform/form.story.vue | 2 +- examples/docbuilder/components/Builder.vue | 2 +- examples/docbuilder/style.css | 24 +++---- themes/agritheory/agritheory.css | 24 +++---- themes/dark/dark.css | 30 ++++----- themes/default/_form.css | 46 ++++++------- themes/default/_login.css | 12 ++-- themes/default/_table.css | 52 +++++++-------- themes/default/_variables.css | 78 +++++++++++----------- themes/excel/excel.css | 26 ++++---- themes/legal/legal.css | 24 +++---- themes/old_themes/agritheory.css | 20 ------ themes/old_themes/atable.css | 28 -------- themes/old_themes/dark.css | 31 --------- themes/old_themes/excel.css | 21 ------ themes/old_themes/legal.css | 20 ------ themes/old_themes/parsimony.css | 25 ------- themes/old_themes/ubuntu.css | 26 -------- themes/old_themes/vue.css | 26 -------- themes/verdant/verdant.css | 51 +++++++------- themes/vue/vue.css | 26 ++++---- 29 files changed, 256 insertions(+), 454 deletions(-) delete mode 100644 themes/old_themes/agritheory.css delete mode 100644 themes/old_themes/atable.css delete mode 100644 themes/old_themes/dark.css delete mode 100644 themes/old_themes/excel.css delete mode 100644 themes/old_themes/legal.css delete mode 100644 themes/old_themes/parsimony.css delete mode 100644 themes/old_themes/ubuntu.css delete mode 100644 themes/old_themes/vue.css diff --git a/aform/src/components/form/ADate.vue b/aform/src/components/form/ADate.vue index 4653ff01..7b0193c4 100644 --- a/aform/src/components/form/ADate.vue +++ b/aform/src/components/form/ADate.vue @@ -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; @@ -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; @@ -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); } diff --git a/aform/src/components/form/ADropdown.vue b/aform/src/components/form/ADropdown.vue index 61f1a003..4c4c17f1 100644 --- a/aform/src/components/form/ADropdown.vue +++ b/aform/src/components/form/ADropdown.vue @@ -136,7 +136,7 @@ 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; @@ -144,7 +144,7 @@ input { } 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; } @@ -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; } @@ -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; } diff --git a/aform/src/components/form/AFieldset.vue b/aform/src/components/form/AFieldset.vue index 0a1e173f..6f83abf7 100644 --- a/aform/src/components/form/AFieldset.vue +++ b/aform/src/components/form/AFieldset.vue @@ -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 { diff --git a/aform/src/theme/adate.css b/aform/src/theme/adate.css index 6734f5d8..3ef78257 100644 --- a/aform/src/theme/adate.css +++ b/aform/src/theme/adate.css @@ -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); */ @@ -32,7 +32,7 @@ } .adatepicker .selectedDate { outline: 1px solid black; - background: var(--gray-20); + background: var(--sc-gray-20); font-weight: bolder; } @@ -45,5 +45,5 @@ font-weight: bold; } .prev-date { - color: var(--gray-20); + color: var(--sc-gray-20); } diff --git a/aform/src/theme/fields.css b/aform/src/theme/fields.css index d7204eb8..0c7447a9 100644 --- a/aform/src/theme/fields.css +++ b/aform/src/theme/fields.css @@ -9,7 +9,7 @@ } .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; @@ -17,7 +17,7 @@ width: 100%; } .field-label { - color: var(--input-label-color); + color: var(--sc-input-label-color); display: block; min-height: 1.15rem; padding: 0.25rem; @@ -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 { @@ -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 **/ @@ -80,5 +80,5 @@ p.error { } .checkbox-container:hover + .field-label { - color: var(--input-active-label-color); + color: var(--sc-input-active-label-color); } diff --git a/aform/src/theme/purple_theme.css b/aform/src/theme/purple_theme.css index e37daed4..8d9e04cb 100644 --- a/aform/src/theme/purple_theme.css +++ b/aform/src/theme/purple_theme.css @@ -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; } diff --git a/beam/themes/beam.css b/beam/themes/beam.css index b0f677c8..1f84b610 100644 --- a/beam/themes/beam.css +++ b/beam/themes/beam.css @@ -4,25 +4,25 @@ :root { /* variables */ - --primary-color: #f2f2f2; /* primary action color */ - --primary-text-color: #666666; /* text color paired with primary color */ + --sc-primary-color: #f2f2f2; /* primary action color */ + --sc-primary-text-color: #666666; /* text color paired with primary color */ - --alert: #e63c28; - --success: #155724; + --sc-alert: #e63c28; + --sc-success: #155724; - --font-family: Arimo, Arial, sans-serif; + --sc-font-family: Arimo, Arial, sans-serif; - --row-border-color: #ccc; + --sc-row-border-color: #ccc; - --btn-color: white; - --btn-border: #ccc; - --btn-label-color: black; + --sc-btn-color: white; + --sc-btn-border: #ccc; + --sc-btn-label-color: black; - --list-margin: 0rem 0.625rem; + --sc-list-margin: 0rem 0.625rem; } body { - font-family: var(--font-family); + font-family: var(--sc-font-family); background-color: white; margin: 0; padding: 0; @@ -38,12 +38,12 @@ body { border: 1px solid transparent; text-align: left; font-size: 1.125rem; - color: var(--primary-text-color); + color: var(--sc-primary-text-color); margin: 0; padding: 0; } .beam_copy { - color: var(--primary-text-color); + color: var(--sc-primary-text-color); font-size: 1rem; line-height: 1.5rem; } @@ -56,20 +56,20 @@ body { font-weight: normal; } .beam--alert { - color: var(--alert); + color: var(--sc-alert); } .beam--success { - color: var(--success); + color: var(--sc-success); } /* beam navbar */ .beam_navbar { padding: 0.625rem; - background-color: var(--primary-color); + background-color: var(--sc-primary-color); margin-left: 0; min-height: 2em; max-height: 2em; - color: var(--primary-text-color); + color: var(--sc-primary-text-color); display: flex; flex-flow: row nowrap; align-content: center; @@ -77,7 +77,7 @@ body { align-items: center; position: sticky; top: 0; - border-bottom: 1px solid var(--row-border-color); + border-bottom: 1px solid var(--sc-row-border-color); & h1 { margin-left: 0.625rem; @@ -88,7 +88,7 @@ body { .beam_list-view { list-style-type: none; - margin: var(--list-margin); + margin: var(--sc-list-margin); padding: 0; padding-bottom: 2.5em; margin-top: 1px; @@ -96,7 +96,7 @@ body { .beam_list-item { padding: 0.625rem; - border-bottom: 1px solid var(--row-border-color); + border-bottom: 1px solid var(--sc-row-border-color); max-width: 100%; box-sizing: border-box; display: flex; @@ -108,8 +108,8 @@ body { outline-offset: -1px; &:focus { - outline: 2px solid var(--focus-cell-outline); - background-color: var(--focus-cell-background); + outline: 2px solid var(--sc-focus-cell-outline); + background-color: var(--sc-focus-cell-background); } } .beam_list-text { @@ -119,7 +119,7 @@ body { overflow: hidden; flex-grow: 1; font-size: 0.875rem; - color: var(--primary-text-color); + color: var(--sc-primary-text-color); & label, & p { @@ -138,14 +138,14 @@ body { .beam_list-anchor { text-decoration: none; outline: none; - color: var(--primary-text-color); + color: var(--sc-primary-text-color); } /* item count */ .beam_item-count { font-size: 1.3125rem; - color: var(--primary-text-color); + color: var(--sc-primary-text-color); } .beam_item-count span { margin: 0; @@ -159,21 +159,21 @@ body { font-size: 0.875rem; text-align: center; padding: 0.3125rem 0.75rem; - border: 1px solid var(--btn-border); - color: var(--btn-label-color); - background-color: var(--btn-color); + border: 1px solid var(--sc-btn-border); + color: var(--sc-btn-label-color); + background-color: var(--sc-btn-color); cursor: pointer; &:hover, &:active { - background-color: var(--btn-hover); + background-color: var(--sc-btn-hover); } } .beam_action-footer { margin-left: 0; background: linear-gradient(180deg, transparent 0%, white 100%); - color: var(--primary-text-color); + color: var(--sc-primary-text-color); position: fixed; bottom: 0; left: 0; @@ -209,9 +209,9 @@ body { margin: 0.625rem; } & h2 { - border-bottom: 1px solid var(--row-border-color); + border-bottom: 1px solid var(--sc-row-border-color); padding-bottom: 0.625rem; - color: var(--primary-text-color); + color: var(--sc-primary-text-color); } } @@ -223,7 +223,7 @@ body { display: flex; flex-direction: column; max-height: 100vh; - color: var(--primary-text-color); + color: var(--sc-primary-text-color); } .beam_metadata_content { padding-top: 10px; diff --git a/code_editor/src/theme/purple_theme.css b/code_editor/src/theme/purple_theme.css index e37daed4..8d9e04cb 100644 --- a/code_editor/src/theme/purple_theme.css +++ b/code_editor/src/theme/purple_theme.css @@ -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; } diff --git a/examples/aform/form.story.vue b/examples/aform/form.story.vue index dc12d987..1fe8c05d 100644 --- a/examples/aform/form.story.vue +++ b/examples/aform/form.story.vue @@ -72,7 +72,7 @@ nav { /* flex-direction: row; */ flex-direction: row-reverse; align-items: center; - border-bottom: 2px solid var(--primary-color); + border-bottom: 2px solid var(--sc-primary-color); margin: 0px; padding-left: 1ch; padding-right: 1ch; diff --git a/examples/docbuilder/components/Builder.vue b/examples/docbuilder/components/Builder.vue index bee826cd..38f41686 100644 --- a/examples/docbuilder/components/Builder.vue +++ b/examples/docbuilder/components/Builder.vue @@ -108,7 +108,7 @@ body { .builder-schema, .builder-hooks, .builder-events { - border: 1px solid var(--gray-20); + border: 1px solid var(--sc-gray-20); /* border-radius: 10px; */ padding: 1em; diff --git a/examples/docbuilder/style.css b/examples/docbuilder/style.css index e346e7a2..37e6c9e5 100644 --- a/examples/docbuilder/style.css +++ b/examples/docbuilder/style.css @@ -11,7 +11,7 @@ nav { /* flex-direction: row; */ flex-direction: row-reverse; align-items: center; - border-bottom: 2px solid var(--primary-color); + border-bottom: 2px solid var(--sc-primary-color); margin: 0px; padding-left: 1ch; padding-right: 1ch; @@ -20,26 +20,26 @@ nav { table { display: table; border-collapse: collapse; - caret-color: var(--brand-color); + caret-color: var(--sc-brand-color); } table.atable, .atable { - font-family: var(--atable-font-family); + font-family: var(--sc-atable-font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); + font-size: var(--sc-table-font-size); border-collapse: collapse; } th { box-sizing: border-box; - background-color: var(--brand-color); + background-color: var(--sc-brand-color); border-width: 1px; border-style: solid; - border-color: var(--header-border-color); + border-color: var(--sc-header-border-color); border-radius: 0px; - color: var(--header-text-color); + color: var(--sc-header-text-color); } td { @@ -48,14 +48,14 @@ td { margin: 0px; outline: none; box-shadow: none; - color: var(--cell-text-color); + color: var(--sc-cell-text-color); text-overflow: ellipsis; overflow: hidden; padding-left: 0.5ch !important; padding-right: 0.5ch; - padding-top: var(--atable-row-padding); - padding-bottom: var(--atable-row-padding); + padding-top: var(--sc-atable-row-padding); + padding-bottom: var(--sc-atable-row-padding); border-spacing: 0px; border-collapse: collapse; @@ -63,10 +63,10 @@ td { td:focus, td:focus-within { - background-color: var(--focus-cell-background); + background-color: var(--sc-focus-cell-background); outline-width: 2px; outline-style: solid; - outline-color: var(--focus-cell-outline); + outline-color: var(--sc-focus-cell-outline); box-shadow: none; overflow: hidden; min-height: 1.15em; diff --git a/themes/agritheory/agritheory.css b/themes/agritheory/agritheory.css index bb041f97..49c85719 100644 --- a/themes/agritheory/agritheory.css +++ b/themes/agritheory/agritheory.css @@ -1,20 +1,20 @@ :root { - --brand-color: #a5460d; - --header-border-color: #f7f7e9; - --header-text-color: #f7f7e9; - --row-color-zebra-light: #f7f7e9; - --row-color-zebra-dark: #c3b9a0; - --cell-border-color: #f7f7e9; - --cell-text-color: #3a3c41; - --active-cell-background: #f7f7e9; - --active-cell-outline: #a5460d; - --required-border: #e63c28; - --table-font-size: 11pt; + --sc-active-cell-background: #f7f7e9; + --sc-active-cell-outline: #a5460d; + --sc-brand-color: #a5460d; + --sc-cell-border-color: #f7f7e9; + --sc-cell-text-color: #3a3c41; + --sc-header-border-color: #f7f7e9; + --sc-header-text-color: #f7f7e9; + --sc-required-border: #e63c28; + --sc-row-color-zebra-dark: #c3b9a0; + --sc-row-color-zebra-light: #f7f7e9; + --sc-table-font-size: 11pt; } .atable { font-family: Muli, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); + font-size: var(--sc-table-font-size); } diff --git a/themes/dark/dark.css b/themes/dark/dark.css index 46e8dd46..2b1dfd46 100644 --- a/themes/dark/dark.css +++ b/themes/dark/dark.css @@ -1,27 +1,27 @@ @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); :root { - --brand-color: #3a3c41; - --header-border-color: #666666; - --header-text-color: #ffffff; - --row-color-zebra-light: #3a3c41; - --row-color-zebra-dark: #3a3c41; - --cell-border-color: #666666; - --cell-text-color: #dddddd; - --focus-cell-background: #3a3c41; - --focus-cell-outline: #dddddd; - --active-cell-background: #3a3c41; - --active-cell-outline: #dddddd; - --required-border: #e63c28; - --table-font-size: 12pt; - --border-collapsed: collapse; + --sc-active-cell-background: #3a3c41; + --sc-active-cell-outline: #dddddd; + --sc-border-collapsed: collapse; + --sc-brand-color: #3a3c41; + --sc-cell-border-color: #666666; + --sc-cell-text-color: #dddddd; + --sc-focus-cell-background: #3a3c41; + --sc-focus-cell-outline: #dddddd; + --sc-header-border-color: #666666; + --sc-header-text-color: #ffffff; + --sc-required-border: #e63c28; + --sc-row-color-zebra-dark: #3a3c41; + --sc-row-color-zebra-light: #3a3c41; + --sc-table-font-size: 12pt; } .atable { font-family: Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); + font-size: var(--sc-table-font-size); } body { diff --git a/themes/default/_form.css b/themes/default/_form.css index ffbcaf4b..7c5bb07b 100644 --- a/themes/default/_form.css +++ b/themes/default/_form.css @@ -1,4 +1,4 @@ -/* +/* Holds styles for all form fields */ /* .aform__form{ @@ -9,8 +9,8 @@ Holds styles for all form fields flex-wrap: wrap; gap: 1rem; padding: 1rem; - border: 1px solid var(--gray-5); - border-left: 4px solid var(--gray-5); + border: 1px solid var(--sc-gray-5); + border-left: 4px solid var(--sc-gray-5); margin-bottom: 1rem; max-width: 100%; } @@ -30,7 +30,7 @@ Holds styles for all form fields } .aform__input-field { outline: 1px solid transparent; - border: 1px solid var(--input-border-color); + border: 1px solid var(--sc-input-border-color); font-size: 1rem; padding: 0.25rem; padding-top: 0.5rem; @@ -40,10 +40,10 @@ Holds styles for all form fields box-sizing: border-box; width: 100%; position: relative; - color: var(--cell-text-color); + color: var(--sc-cell-text-color); } .aform__field-label { - color: var(--input-label-color); + color: var(--sc-input-label-color); display: inline-block; position: absolute; padding: 0 0.25rem; @@ -58,7 +58,7 @@ Holds styles for all form fields background: white; /* padding:0 5px; */ margin: 0; - border: 1px solid var(--input-border-color); + border: 1px solid var(--sc-input-border-color); grid-row: 1; top: 0; left: 10px; @@ -77,7 +77,7 @@ p.error { border: 1px solid transparent; width: 100%; width: auto; - color: var(--brand-danger); + color: var(--sc-brand-danger); font-size: 0.8rem; position: absolute; right: 0; @@ -91,11 +91,11 @@ p.error { } .aform__input-field:focus { - border: 1px solid var(--input-active-border-color); + border: 1px solid var(--sc-input-active-border-color); } .aform__input-field:focus + .aform__field-label { - color: var(--input-active-label-color); + color: var(--sc-input-active-label-color); } /** CHECKBOX **/ @@ -106,7 +106,7 @@ p.error { display: block; } .aform__checkbox:checked { - accent-color: var(--primary-color); + accent-color: var(--sc-primary-color); border: 1px solid black; } @@ -120,25 +120,25 @@ p.error { } .aform__checkbox-container:hover + .aform__field-label { - color: var(--input-active-label-color); + color: var(--sc-input-active-label-color); } .aform-primary-action { font-size: 100%; text-align: center; min-height: 2em; padding: 0.25rem 1rem 0.25rem 1rem; - border: 1px solid var(--primary-color); - color: var(--primary-text-color); - background-color: var(--primary-color); - outline: 2px solid var(--primary-text-color); + border: 1px solid var(--sc-primary-color); + color: var(--sc-primary-text-color); + background-color: var(--sc-primary-color); + outline: 2px solid var(--sc-primary-text-color); transition: outline-offset 200ms ease; - font-size: var(--font-size); + font-size: var(--sc-font-size); margin: 0.5ch; } .aform-primary-action:hover, .aform-primary-action:active { - outline: 2px solid var(--primary-text-color); + outline: 2px solid var(--sc-primary-text-color); outline-offset: -4px; transition: outline-offset 200ms ease; } @@ -151,13 +151,13 @@ tr:focus { .aform__form-btn { padding: 0.5rem 2rem; width: auto; - border: 1px solid var(--input-border-color); - color: var(--input-label-color); + border: 1px solid var(--sc-input-border-color); + color: var(--sc-input-label-color); cursor: pointer; background-color: white; } .aform__form-btn:disabled { - background-color: var(--gray-5); + background-color: var(--sc-gray-5); } .aform__file-attach { padding: 1rem; @@ -167,7 +167,7 @@ tr:focus { flex-direction: row; justify-content: center; align-items: center; - border: 1px dashed var(--input-border-color); + border: 1px dashed var(--sc-input-border-color); width: 100%; } @media screen and (max-width: 400px) { @@ -180,7 +180,7 @@ tr:focus { } */ .aform__file-attach-feedback { - color: var(--input-label-color); + color: var(--sc-input-label-color); width: 100%; padding: 0.5rem; text-align: center; diff --git a/themes/default/_login.css b/themes/default/_login.css index a9df104b..13f53159 100644 --- a/themes/default/_login.css +++ b/themes/default/_login.css @@ -5,7 +5,7 @@ flex-direction: column; align-items: center; justify-content: center; - font-family: var(--font-family); + font-family: var(--sc-font-family); } .account-container { @@ -52,7 +52,7 @@ .login-field { padding: 0.5rem 0.25rem 0.25rem 0.5rem; outline: 1px solid transparent; - border: 1px solid var(--input-border-color); + border: 1px solid var(--sc-input-border-color); border-radius: 0.25rem; &:focus { @@ -61,16 +61,16 @@ } .btn { - background-color: var(--btn-color); - color: var(--btn-label-color); - border: 1px solid var(--btn-border); + background-color: var(--sc-btn-color); + color: var(--sc-btn-label-color); + border: 1px solid var(--sc-btn-border); margin: 0.5rem 0; padding: 0.25rem; position: relative; cursor: pointer; &:hover { - background-color: var(--btn-hover); + background-color: var(--sc-btn-hover); } &:disabled { background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3)); diff --git a/themes/default/_table.css b/themes/default/_table.css index d7d09745..b32e7fc8 100644 --- a/themes/default/_table.css +++ b/themes/default/_table.css @@ -6,33 +6,33 @@ Holds styles for all tables, TH, TR, TD, etc. } */ .atable { - font-family: var(--atable-font-family); + font-family: var(--sc-atable-font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); + font-size: var(--sc-table-font-size); border-collapse: collapse; } .row-index { - color: var(--header-text-color); + color: var(--sc-header-text-color); font-weight: bold; text-align: center; user-select: none; width: 2ch; } .expandable-row { - border-top: 1px solid var(--row-border-color); - height: var(--atable-row-height); - border-left: 4px solid var(--row-border-color); + border-top: 1px solid var(--sc-row-border-color); + height: var(--sc-atable-row-height); + border-left: 4px solid var(--sc-row-border-color); } .expanded-row { - border-bottom: 1px solid var(--row-border-color); - border-top: 1px solid var(--row-border-color); + border-bottom: 1px solid var(--sc-row-border-color); + border-top: 1px solid var(--sc-row-border-color); } .expanded-row-content { - border-bottom: 1px solid var(--row-border-color); - border-top: 1px solid var(--row-border-color); + border-bottom: 1px solid var(--sc-row-border-color); + border-top: 1px solid var(--sc-row-border-color); padding: 1.5rem; } .atable__cell { @@ -41,13 +41,13 @@ Holds styles for all tables, TH, TR, TD, etc. margin: 0px; outline: none; box-shadow: none; - color: var(--cell-text-color); + color: var(--sc-cell-text-color); text-overflow: ellipsis; overflow: hidden; padding-left: 0.5ch !important; padding-right: 0.5ch; - padding-top: var(--atable-row-padding); - padding-bottom: var(--atable-row-padding); + padding-top: var(--sc-atable-row-padding); + padding-bottom: var(--sc-atable-row-padding); border-spacing: 0px; border-collapse: collapse; @@ -62,11 +62,11 @@ Holds styles for all tables, TH, TR, TD, etc. } .atable__cell:focus, .atable__cell:focus-within { - background-color: var(--focus-cell-background); + background-color: var(--sc-focus-cell-background); outline-width: 2px; outline-style: solid; outline-offset: -1px; - outline-color: var(--focus-cell-outline); + outline-color: var(--sc-focus-cell-outline); box-shadow: none; overflow: hidden; min-height: 1.15em; @@ -76,16 +76,16 @@ Holds styles for all tables, TH, TR, TD, etc. } .table-row { - border-top: 1px solid var(--row-border-color); - height: var(--atable-row-height); + border-top: 1px solid var(--sc-row-border-color); + height: var(--sc-atable-row-height); display: flex; background-color: white; } .list-index { - color: var(--header-text-color); + color: var(--sc-header-text-color); font-weight: bold; - padding-left: var(--atable-row-padding); + padding-left: var(--sc-atable-row-padding); padding-right: 1em; text-align: center; user-select: none; @@ -95,7 +95,7 @@ Holds styles for all tables, TH, TR, TD, etc. } .tree-index { - color: var(--header-text-color); + color: var(--sc-header-text-color); font-weight: bold; text-align: center; user-select: none; @@ -118,10 +118,10 @@ Holds styles for all tables, TH, TR, TD, etc. border-radius: 0px; padding-left: 0.5ch; padding-right: 0.5ch; - padding-top: var(--atable-row-padding); - padding-bottom: var(--atable-row-padding); - color: var(--gray-60); - height: var(--atable-row-height); + padding-top: var(--sc-atable-row-padding); + padding-bottom: var(--sc-atable-row-padding); + color: var(--sc-gray-60); + height: var(--sc-atable-row-height); font-weight: 300; letter-spacing: 0.05rem; order: 1; @@ -137,7 +137,7 @@ Holds styles for all tables, TH, TR, TD, etc. .amodal { position: fixed; - background-color: var(--row-color-zebra-dark); + background-color: var(--sc-row-color-zebra-dark); z-index: 100; } @@ -160,6 +160,6 @@ td.sticky-index { } .sticky-column-edge, .atable th.sticky-column-edge { - border-right: 1px solid var(--row-border-color); + border-right: 1px solid var(--sc-row-border-color); border-right-width: 1px; } diff --git a/themes/default/_variables.css b/themes/default/_variables.css index eb3bd765..5f3ebbf7 100644 --- a/themes/default/_variables.css +++ b/themes/default/_variables.css @@ -2,64 +2,64 @@ /* THEME COLORS */ /* General Colors */ - --primary-color: #0098c9; /* primary action color, default blue */ - --primary-text-color: #ffffff; /* text color paired with primary color, default white */ - --brand-color: #202a44; /* brand color, default navy */ + --sc-primary-color: #0098c9; /* primary action color, default blue */ + --sc-primary-text-color: #ffffff; /* text color paired with primary color, default white */ + --sc-brand-color: #202a44; /* brand color, default navy */ /* Grays */ - --gray-5: #f2f2f2; - --gray-10: #e6e6e6; - --gray-20: #cccccc; - --gray-50: #808080; - --gray-60: #666666; - --gray-80: #333333; + --sc-gray-5: #f2f2f2; + --sc-gray-10: #e6e6e6; + --sc-gray-20: #cccccc; + --sc-gray-50: #808080; + --sc-gray-60: #666666; + --sc-gray-80: #333333; /* Warnings/Alerts/Success */ - --brand-danger: #e63c28; - --brand-success: #155724; + --sc-brand-danger: #e63c28; + --sc-brand-success: #155724; /* Table Colors */ - --row-color-zebra-light: #eeeeee; - --row-color-zebra-dark: #dddddd; - --focus-cell-background: #ffffff; - --focus-cell-outline: #000000; - --cell-border-color: #ffffff; - --cell-text-color: #3a3c41; - --active-cell-background: #ffffff; - --active-cell-outline: #e6a92d; - --row-border-color: var(--gray-20); - --header-border-color: #ffffff; - --header-text-color: var(--gray-20); - --row-number-background-color: #ffffff; + --sc-active-cell-background: #ffffff; + --sc-active-cell-outline: #e6a92d; + --sc-cell-border-color: #ffffff; + --sc-cell-text-color: #3a3c41; + --sc-focus-cell-background: #ffffff; + --sc-focus-cell-outline: #000000; + --sc-header-border-color: #ffffff; + --sc-header-text-color: var(--sc-gray-20); + --sc-row-border-color: var(--sc-gray-20); + --sc-row-color-zebra-dark: #dddddd; + --sc-row-color-zebra-light: #eeeeee; + --sc-row-number-background-color: #ffffff; /* Form Colors */ - --input-border-color: var(--gray-20); - --input-label-color: var(--gray-60); - --input-active-border-color: #000000; - --input-active-label-color: #000000; - --required-border: #e63c28; + --sc-input-active-border-color: #000000; + --sc-input-active-label-color: #000000; + --sc-input-border-color: var(--sc-gray-20); + --sc-input-label-color: var(--sc-gray-60); + --sc-required-border: #e63c28; /* FONT */ - --font-size: 10px; - --font-family: Arimo, Arial, sans-serif; - --table-font-size: 16px; - --atable-font-family: 'Arimo', sans-serif; + --sc-font-size: 10px; + --sc-font-family: Arimo, Arial, sans-serif; + --sc-table-font-size: 16px; + --sc-atable-font-family: 'Arimo', sans-serif; /* TABLE */ - --atable-row-padding: 0px; - --atable-row-height: 1.5em; + --sc-atable-row-padding: 0px; + --sc-atable-row-height: 1.5em; /* FORM */ /* BTNS */ - --btn-color: white; - --btn-border: #cccccc; - --btn-hover: #f2f2f2; - --btn-label-color: black; + --sc-btn-border: #cccccc; + --sc-btn-color: white; + --sc-btn-hover: #f2f2f2; + --sc-btn-label-color: black; } /* @media (prefers-color-scheme: dark) { :root{ - --cell-text-color: #d8d8d8; + --sc-cell-text-color: #d8d8d8; } } */ diff --git a/themes/excel/excel.css b/themes/excel/excel.css index 05ac829c..4fbbb4fe 100644 --- a/themes/excel/excel.css +++ b/themes/excel/excel.css @@ -1,21 +1,21 @@ :root { - --brand-color: #227144; - --header-border-color: #227144; - --header-text-color: #ffffff; - --row-color-zebra-light: #ffffff; - --row-color-zebra-dark: #ffffff; - --cell-border-color: #666666; - --cell-text-color: #222222; - --active-cell-background: #ffffff; - --active-cell-outline: #227144; - --required-border: #e63c28; - --table-font-size: 11pt; - --border-collapsed: collapse; + --sc-active-cell-background: #ffffff; + --sc-active-cell-outline: #227144; + --sc-border-collapsed: collapse; + --sc-brand-color: #227144; + --sc-cell-border-color: #666666; + --sc-cell-text-color: #222222; + --sc-header-border-color: #227144; + --sc-header-text-color: #ffffff; + --sc-required-border: #e63c28; + --sc-row-color-zebra-dark: #ffffff; + --sc-row-color-zebra-light: #ffffff; + --sc-table-font-size: 11pt; } .atable { font-family: Calibri, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); + font-size: var(--sc-table-font-size); } diff --git a/themes/legal/legal.css b/themes/legal/legal.css index 124bbf21..9c5d8ec8 100644 --- a/themes/legal/legal.css +++ b/themes/legal/legal.css @@ -1,20 +1,20 @@ :root { - --brand-color: #31708e; - --header-border-color: #31708e; - --header-text-color: #f7f9fb; - --row-color-zebra-light: #f7f9fb; - --row-color-zebra-dark: #eeeeee; - --cell-border-color: #ffffff; - --cell-text-color: #080604; - --active-cell-background: #ffffff; - --active-cell-outline: #687864; - --required-border: #e04e46; - --table-font-size: 11pt; + --sc-active-cell-background: #ffffff; + --sc-active-cell-outline: #687864; + --sc-brand-color: #31708e; + --sc-cell-border-color: #ffffff; + --sc-cell-text-color: #080604; + --sc-header-border-color: #31708e; + --sc-header-text-color: #f7f9fb; + --sc-required-border: #e04e46; + --sc-row-color-zebra-dark: #eeeeee; + --sc-row-color-zebra-light: #f7f9fb; + --sc-table-font-size: 11pt; } .atable { font-family: Sabon, serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); + font-size: var(--sc-table-font-size); } diff --git a/themes/old_themes/agritheory.css b/themes/old_themes/agritheory.css deleted file mode 100644 index bb041f97..00000000 --- a/themes/old_themes/agritheory.css +++ /dev/null @@ -1,20 +0,0 @@ -:root { - --brand-color: #a5460d; - --header-border-color: #f7f7e9; - --header-text-color: #f7f7e9; - --row-color-zebra-light: #f7f7e9; - --row-color-zebra-dark: #c3b9a0; - --cell-border-color: #f7f7e9; - --cell-text-color: #3a3c41; - --active-cell-background: #f7f7e9; - --active-cell-outline: #a5460d; - --required-border: #e63c28; - --table-font-size: 11pt; -} - -.atable { - font-family: Muli, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); -} diff --git a/themes/old_themes/atable.css b/themes/old_themes/atable.css deleted file mode 100644 index 3edbe466..00000000 --- a/themes/old_themes/atable.css +++ /dev/null @@ -1,28 +0,0 @@ -:root { - --brand-color: #827553; - --header-border-color: #f7f7f0; - --header-text-color: #f7f7f0; - --row-color-zebra-light: #dcdcd7; - --row-color-zebra-dark: #cdcdc8; - --cell-border-color: #f7f7f0; - --cell-text-color: #070607; - --focus-cell-background: #f7f7f0; - --focus-cell-outline: #827553; - --active-cell-background: #f7f7f0; - --active-cell-outline: #e6a92d; - --required-border: #e63c28; - --table-font-size: 11pt; - --atable-font-family: 'Arimo', sans-serif; -} - -html, -body { - font-family: var(--atable-font-family); -} - -.atable { - font-family: var(--atable-font-family); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); -} diff --git a/themes/old_themes/dark.css b/themes/old_themes/dark.css deleted file mode 100644 index 46e8dd46..00000000 --- a/themes/old_themes/dark.css +++ /dev/null @@ -1,31 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); - -:root { - --brand-color: #3a3c41; - --header-border-color: #666666; - --header-text-color: #ffffff; - --row-color-zebra-light: #3a3c41; - --row-color-zebra-dark: #3a3c41; - --cell-border-color: #666666; - --cell-text-color: #dddddd; - --focus-cell-background: #3a3c41; - --focus-cell-outline: #dddddd; - --active-cell-background: #3a3c41; - --active-cell-outline: #dddddd; - --required-border: #e63c28; - --table-font-size: 12pt; - --border-collapsed: collapse; -} - -.atable { - font-family: Roboto, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); -} - -body { - background-color: #3a3c41; - font-family: Roboto, Arial, sans-serif; - color: #dddddd; -} diff --git a/themes/old_themes/excel.css b/themes/old_themes/excel.css deleted file mode 100644 index 05ac829c..00000000 --- a/themes/old_themes/excel.css +++ /dev/null @@ -1,21 +0,0 @@ -:root { - --brand-color: #227144; - --header-border-color: #227144; - --header-text-color: #ffffff; - --row-color-zebra-light: #ffffff; - --row-color-zebra-dark: #ffffff; - --cell-border-color: #666666; - --cell-text-color: #222222; - --active-cell-background: #ffffff; - --active-cell-outline: #227144; - --required-border: #e63c28; - --table-font-size: 11pt; - --border-collapsed: collapse; -} - -.atable { - font-family: Calibri, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); -} diff --git a/themes/old_themes/legal.css b/themes/old_themes/legal.css deleted file mode 100644 index 124bbf21..00000000 --- a/themes/old_themes/legal.css +++ /dev/null @@ -1,20 +0,0 @@ -:root { - --brand-color: #31708e; - --header-border-color: #31708e; - --header-text-color: #f7f9fb; - --row-color-zebra-light: #f7f9fb; - --row-color-zebra-dark: #eeeeee; - --cell-border-color: #ffffff; - --cell-text-color: #080604; - --active-cell-background: #ffffff; - --active-cell-outline: #687864; - --required-border: #e04e46; - --table-font-size: 11pt; -} - -.atable { - font-family: Sabon, serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); -} diff --git a/themes/old_themes/parsimony.css b/themes/old_themes/parsimony.css deleted file mode 100644 index 8e14dad4..00000000 --- a/themes/old_themes/parsimony.css +++ /dev/null @@ -1,25 +0,0 @@ -:root { - /* --brand-color: #3fb2bf; */ - --brand-color: #2f99a8; - --header-border-color: #ffffff; - --header-text-color: #ffffff; - --row-color-zebra-light: #f5f5f5; - --row-color-zebra-dark: #e5e5e5; - --cell-border-color: #ffffff; - --cell-text-color: #3a3c41; - --focus-cell-background: #f5f5f5; - --focus-cell-outline: #2f99a8; - --active-cell-background: #f5f5f5; - --active-cell-outline: #2f99a8; - --scrollbar-handle-color: #2f99a8; - --required-border: #e63c28; - --table-font-size: 12pt; - --border-collapsed: collapse; -} - -.atable { - font-family: Expressway, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); -} diff --git a/themes/old_themes/ubuntu.css b/themes/old_themes/ubuntu.css deleted file mode 100644 index b1038fbd..00000000 --- a/themes/old_themes/ubuntu.css +++ /dev/null @@ -1,26 +0,0 @@ -:root { - --brand-color: #e95420; - --header-border-color: #e95420; - --header-text-color: #ffffff; - --row-color-zebra-light: #f2f1f0; - --row-color-zebra-dark: #dfd8dd; - --cell-border-color: #ffffff; - --cell-text-color: #222222; - --active-cell-background: #ffffff; - --active-cell-outline: #772953; - --required-border: #e95420; - --table-font-size: 11pt; - --border-collapsed: none; -} - -.atable { - font-family: Ubuntu, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); -} - -body { - background: rgb(233, 84, 32); - background: linear-gradient(260deg, rgba(233, 84, 32, 1) 0%, rgba(119, 41, 83, 1) 100%); -} diff --git a/themes/old_themes/vue.css b/themes/old_themes/vue.css deleted file mode 100644 index c151187f..00000000 --- a/themes/old_themes/vue.css +++ /dev/null @@ -1,26 +0,0 @@ -:root { - --brand-color: #34495e; - --header-border-color: #34495e; - --header-text-color: #ffffff; - --row-color-zebra-light: #ecf8f3; - --row-color-zebra-dark: #d9f1e6; - --cell-border-color: #ffffff; - --cell-text-color: #34495e; - --active-cell-background: #ffffff; - --active-cell-outline: #41b883; - --required-border: #b84277; - --table-font-size: 11pt; - --border-collapsed: none; -} - -.atable { - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, - Helvetica Neue, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); -} - -body { - background: #ffffff; -} diff --git a/themes/verdant/verdant.css b/themes/verdant/verdant.css index 7e8ca10f..0fa43b61 100644 --- a/themes/verdant/verdant.css +++ b/themes/verdant/verdant.css @@ -1,24 +1,23 @@ @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: #3c5014; - --primary-text-color: #f7f7e9; - --font-size: 11pt; - font-family: Arimo, Arial, sans-serif; - --brand-color: #3c5014; - --header-border-color: #ffffff; - --header-text-color: #ffffff; - --row-color-zebra-light: #eeeeee; - --row-color-zebra-dark: #dddddd; - --cell-border-color: #ffffff; - --cell-text-color: #3a3c41; - --focus-cell-background: #ffffff; - --focus-cell-outline: #827553; - --active-cell-background: #ffffff; - --active-cell-outline: #e6a92d; - --required-border: #e63c28; - --table-font-size: 11pt; - --atable-font-family: 'Arimo', sans-serif; + --sc-active-cell-background: #ffffff; + --sc-active-cell-outline: #e6a92d; + --sc-atable-font-family: 'Arimo', sans-serif; + --sc-brand-color: #3c5014; + --sc-cell-border-color: #ffffff; + --sc-cell-text-color: #3a3c41; + --sc-focus-cell-background: #ffffff; + --sc-focus-cell-outline: #827553; + --sc-font-size: 11pt; + --sc-header-border-color: #ffffff; + --sc-header-text-color: #ffffff; + --sc-primary-color: #3c5014; + --sc-primary-text-color: #f7f7e9; + --sc-required-border: #e63c28; + --sc-row-color-zebra-dark: #dddddd; + --sc-row-color-zebra-light: #eeeeee; + --sc-table-font-size: 11pt; /* #a5460d #3a3c41 #c3b9a0 @@ -35,25 +34,25 @@ text-align: center; min-height: 2em; padding: 0.25rem 1rem 0.25rem 1rem; - border: 1px solid var(--primary-color); - color: var(--primary-text-color); - background-color: var(--primary-color); - outline: 2px solid var(--primary-text-color); + border: 1px solid var(--sc-primary-color); + color: var(--sc-primary-text-color); + background-color: var(--sc-primary-color); + outline: 2px solid var(--sc-primary-text-color); transition: outline-offset 200ms ease; - font-size: var(--font-size); + font-size: var(--sc-font-size); margin: 0.5ch; } .aform-primary-action:hover, .aform-primary-action:active { - outline: 2px solid var(--primary-text-color); + outline: 2px solid var(--sc-primary-text-color); outline-offset: -4px; transition: outline-offset 200ms ease; } .atable { - font-family: var(--atable-font-family); + font-family: var(--sc-atable-font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); + font-size: var(--sc-table-font-size); } diff --git a/themes/vue/vue.css b/themes/vue/vue.css index c151187f..ba94cf8b 100644 --- a/themes/vue/vue.css +++ b/themes/vue/vue.css @@ -1,16 +1,16 @@ :root { - --brand-color: #34495e; - --header-border-color: #34495e; - --header-text-color: #ffffff; - --row-color-zebra-light: #ecf8f3; - --row-color-zebra-dark: #d9f1e6; - --cell-border-color: #ffffff; - --cell-text-color: #34495e; - --active-cell-background: #ffffff; - --active-cell-outline: #41b883; - --required-border: #b84277; - --table-font-size: 11pt; - --border-collapsed: none; + --sc-active-cell-background: #ffffff; + --sc-active-cell-outline: #41b883; + --sc-border-collapsed: none; + --sc-brand-color: #34495e; + --sc-cell-border-color: #ffffff; + --sc-cell-text-color: #34495e; + --sc-header-border-color: #34495e; + --sc-header-text-color: #ffffff; + --sc-required-border: #b84277; + --sc-row-color-zebra-dark: #d9f1e6; + --sc-row-color-zebra-light: #ecf8f3; + --sc-table-font-size: 11pt; } .atable { @@ -18,7 +18,7 @@ Helvetica Neue, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: var(--table-font-size); + font-size: var(--sc-table-font-size); } body {