added variables for no code colors

AOT-Technologies · Jan 8, 2025 · 65851cf · 65851cf
1 parent e34ecdd
commit 65851cf
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx
@@ -3,7 +3,7 @@ import { InputGroup } from 'react-bootstrap';
 import ListGroup from 'react-bootstrap/ListGroup';
 import { FormInput } from './FormInput';
 import { CloseIcon , ChevronIcon } from "../SvgIcons/index";
-
+import { StyleServices } from "@formsflow/service";
 
 interface DropdownItem {
   label: string;
@@ -47,6 +47,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
   inputClassName='',
   onBlurDropDown
 }) => {
+  const primaryColor = StyleServices.getCSSVariable('primary');
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>(selectedOption || ''); 
   const [filteredItems, setFilteredItems] = useState<DropdownItem[]>([]);
@@ -124,7 +125,7 @@ export const InputDropdown: React.FC<InputDropdownProps> = ({
                       ariaLabel={ariaLabelforInput}
                       dataTestid={dataTestIdforInput}
                       isInvalid={isInvalid}
-                      icon={<CloseIcon onClick={handleClose} color='#253DF4' data-testid="close-input" aria-label="Close input "/>} 
+                      icon={<CloseIcon onClick={handleClose} color={primaryColor} data-testid="close-input" aria-label="Close input "/>} 
                       className="input-with-close"
                       label={dropdownLabel}
                       feedback={feedback}

diff --git a/forms-flow-components/src/declarations.d.ts b/forms-flow-components/src/declarations.d.ts
@@ -39,5 +39,5 @@ declare module "*.svg" {
 }
 
 declare module "@formsflow/service" {
-	export const { HelperServices }: any;
+	export const { HelperServices, StyleServices }: any;
 }
diff --git a/forms-flow-theme/scss/_theme.scss b/forms-flow-theme/scss/_theme.scss
@@ -54,6 +54,9 @@ $dropdown-link-hover-color: $dark;
 $btn-color: $dark;
 $popover-body-color: $dark;
 $btn-disabled-border-color: $gray-100;
+$no-code-success: #1B9C85;
+$no-code-secondary: #EA9389;
+$no-code-warning: #faad14;
 
 $theme-colors: (
   "primary": $primary,
@@ -136,6 +139,10 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   --default-font-size: 1rem; 
   --default-font-color: #{$gray-800};
   --navbar-width: 192px;
+  //no-code colors
+  --no-code-success: #{$no-code-success};
+  --no-code-secondary: #{$no-code-secondary};
+  --no-code-warning: #{$no-code-warning};
   //font-style
   --primary-font: "Roboto", sans-serif;
   //font-size