as

Author: imswarnil

_sass/_main.scss

@@ -1,5 +1,7 @@
 
 
+@import "./vars";
+
 @import "./spruce";
 
 @import "./theme";

_sass/_spruce.scss

@@ -308,125 +308,6 @@ template {
   display: none;
 }
 
-:root {
-  --spruce-alert-color-danger: hsl(0, 71%, 51%);
-  --spruce-alert-color-info: hsl(195, 100%, 42%);
-  --spruce-alert-color-success: hsl(150, 100%, 33%);
-  --spruce-alert-color-warning: hsl(48, 89%, 55%);
-}
-
-:root {
-  --spruce-base-color-background: hsl(0, 0%, 100%);
-  --spruce-base-color-blockquote-border: hsl(262, 71%, 49%);
-  --spruce-base-color-border: hsl(215, 63%, 93%);
-  --spruce-base-color-code-background: hsl(262, 71%, 97%);
-  --spruce-base-color-code-foreground: hsl(205, 100%, 2%);
-  --spruce-base-color-heading: hsl(205, 100%, 2%);
-  --spruce-base-color-link: hsl(262, 71%, 49%);
-  --spruce-base-color-link-hover: hsl(262, 71%, 39.2%);
-  --spruce-base-color-mark-background: hsl(50, 100%, 80%);
-  --spruce-base-color-mark-foreground: hsl(205, 100%, 2%);
-  --spruce-base-color-marker: hsl(262, 71%, 49%);
-  --spruce-base-color-primary: hsl(262, 71%, 49%);
-  --spruce-base-color-secondary: hsl(227, 92%, 55%);
-  --spruce-base-color-strong: hsl(205, 100%, 2%);
-  --spruce-base-color-text: hsl(208, 9%, 42%);
-}
-
-:root {
-  --spruce-btn-color-primary-background: hsl(262, 71%, 49%);
-  --spruce-btn-color-primary-background-hover: hsl(262, 71%, 39%);
-  --spruce-btn-color-primary-foreground: hsl(0, 0%, 100%);
-  --spruce-btn-color-primary-shadow: hsl(262, 71%, 84%);
-  --spruce-btn-color-secondary-background: hsl(227, 92%, 55%);
-  --spruce-btn-color-secondary-background-hover: hsl(227, 92%, 45%);
-  --spruce-btn-color-secondary-foreground: hsl(0, 0%, 100%);
-  --spruce-btn-color-secondary-shadow: hsl(227, 92%, 90%);
-}
-
-:root {
-  --spruce-form-color-background: hsl(0, 0%, 100%);
-  --spruce-form-color-background-disabled: hsl(0, 0%, 95%);
-  --spruce-form-color-border: hsl(260, 4%, 70%);
-  --spruce-form-color-border-disabled: hsl(215, 63%, 93%);
-  --spruce-form-color-border-focus: hsl(262, 71%, 49%);
-  --spruce-form-color-check-background: hsl(262, 71%, 49%);
-  --spruce-form-color-check-focus-ring: hsl(262, 71%, 49%);
-  --spruce-form-color-check-foreground: hsl(0, 0%, 100%);
-  --spruce-form-color-group-label-background: hsl(210, 60%, 98%);
-  --spruce-form-color-group-label-foreground: hsl(208, 9%, 42%);
-  --spruce-form-color-invalid: hsl(0, 71%, 51%);
-  --spruce-form-color-invalid-focus-ring: hsla(0, 71%, 51%, 0.25);
-  --spruce-form-color-label: hsl(205, 100%, 2%);
-  --spruce-form-color-legend: hsl(205, 100%, 2%);
-  --spruce-form-color-placeholder: hsl(208, 7%, 40%);
-  --spruce-form-color-range-thumb-background: hsl(262, 71%, 49%);
-  --spruce-form-color-range-thumb-focus-ring: hsl(262, 71%, 49%);
-  --spruce-form-color-range-track-background: hsl(215, 63%, 93%);
-  --spruce-form-color-ring-focus: hsla(262, 71%, 49%, 0.25);
-  --spruce-form-color-select-foreground: hsl(205, 100%, 2%);
-  --spruce-form-color-switch-background: hsl(262, 71%, 49%);
-  --spruce-form-color-switch-focus-ring: hsl(262, 71%, 49%);
-  --spruce-form-color-switch-foreground: hsl(0, 0%, 100%);
-  --spruce-form-color-text: hsl(208, 9%, 42%);
-  --spruce-form-color-valid: hsl(150, 100%, 33%);
-  --spruce-form-color-valid-focus-ring: hsla(150, 100%, 33%, 0.25);
-}
-
-:root {
-  --spruce-selection-color-foreground: hsl(0, 0%, 100%);
-  --spruce-selection-color-background: hsl(262, 71%, 49%);
-}
-
-:root {
-  --spruce-scrollbar-color-thumb-background: hsla(0, 0%, 0%, 0.15);
-  --spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, 0.25);
-  --spruce-scrollbar-color-track-background: hsla(0, 0%, 0%, 0.05);
-}
-
-:root {
-  --spruce-table-color-border: hsl(215, 63%, 93%);
-  --spruce-table-color-caption: hsl(208, 9%, 42%);
-  --spruce-table-color-heading: hsl(205, 100%, 2%);
-  --spruce-table-color-hover: hsla(0, 0%, 0%, 0.05);
-  --spruce-table-color-stripe: hsla(0, 0%, 0%, 0.025);
-  --spruce-table-color-text: hsl(208, 9%, 42%);
-}
-
-:root {
-  --spruce-border-radius: 0.425rem;
-  --spruce-font-family-base: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
-  --spruce-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
-  --spruce-font-family-heading: Avenir, Avenir Next LT Pro, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
-  --spruce-font-size-base: 1rem;
-  --spruce-font-size-lead: clamp(1.15rem, 2vw, 1.35rem);
-  --spruce-font-size-lg: 1.125rem;
-  --spruce-font-size-ratio: 1.25;
-  --spruce-font-size-sm: 0.875rem;
-  --spruce-font-weight-heading: 700;
-  --spruce-inline-padding: 0.1em 0.3em;
-  --spruce-line-height-base: 1.8;
-  --spruce-line-height-heading: calc(2px + 2ex + 2px);
-  --spruce-line-height-lg: 1.8;
-  --spruce-line-height-md: 1.5;
-  --spruce-line-height-sm: 1.2;
-  --spruce-border-radius-lg: 0.925rem;
-  --spruce-border-radius-sm: 0.425rem;
-  --spruce-container-inline-size: 84rem;
-  --spruce-page-margin: 2cm;
-  --spruce-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"];
-}
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --spruce-duration: 0;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  :root {
-    --spruce-duration: 0.15s;
-    --spruce-timing-function: ease-in-out;
-  }
-}
 
 .sr-only {
   block-size: 1px !important;