feat: add prefix to custom CSS properties

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);
 }
 </style>

aform/src/components/form/ADropdown.vue

@@ -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;
 }
@@ -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;
 }
 </style>

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 {

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);
 }

aform/src/theme/fields.css

@@ -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;
@@ -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);
 }

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;
 }

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,28 +56,28 @@ 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;
 	justify-content: space-between;
 	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,15 +88,15 @@ 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;
 }
 
 .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;

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;
 }

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;

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;