@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/index.ts

@@ -1,77 +1,77 @@
-// @bytebrand/fe-ui-core-autobahn/compat — DESIGN-NEUTRAL LEGACY COMPONENTS,
-// moved verbatim out of @bytebrand/fe-ui-core before its deletion.
-//
-// These are NOT md3 primitives: they render their own markup with co-located
-// .styl (compiled by each consumer's bundler, CSS-modules, no theme injection)
-// and have NO @mui dependency. They exist so the last MUI-free pieces of the
-// legacy design keep one single source. New code should use the md3 kit from
-// the package root (`ui/`, `cards/`, …) instead.
-//
-// NOTE: deliberately NOT re-exported from the package root index.ts — several
-// names (FormCheckbox, Tooltip, …) would clash with the md3 primitives in ui/.
-// Import via `@bytebrand/fe-ui-core-autobahn/compat`.
-
-export { default as Loader } from './Loader/Loader';
-export { default as Image } from './Image/Image';
-export { default as FormattedNumber } from './FormattedNumber/FormattedNumber';
-export { default as VehicleFormattedPrice } from './VehicleFormattedPrice/VehicleFormattedPrice';
-export { default as InfoBlockWrapper } from './InfoBlockWrapper/InfoBlockWrapper';
-export { default as ContactInfo } from './ContactInfo/ContactInfo';
-export { default as ButtonOld } from './ButtonOld/Button';
-
-export { default as Checkbox } from './Checkbox/Checkbox';
-export { default as FormCheckbox } from './Checkbox/FormCheckbox';
-export { default as Tooltip } from './Tooltip/Tooltip';
-export { default as Radio } from './Radio/Radio';
-// legacy alias kept from fe-ui-core's common barrel (RadioButton === Radio)
-export { default as RadioButton } from './Radio/Radio';
-export { default as RadioGroup } from './Radio/RadioGroup';
-
-export { default as AdvantageItem } from './AdvantageItem/AdvantageItem';
-export { default as ImagesSet } from './ImagesSet/ImagesSet';
-export { default as Usp } from './Usp/Usp';
-export { default as CustomerQuote } from './CustomerQuote/CustomerQuote';
-export { default as CustomerQuotesSlider } from './CustomerQuotesSlider/CustomerQuotesSlider';
-export { default as PriceRating } from './PriceRating/PriceRating';
-export { default as PriceRatingDetailed } from './PriceRatingDetailed/PriceRatingDetailed';
-export { default as PricingToolBlock } from './PricingToolBlock/PricingTool';
-export { default as ServiceBlockItem } from './ServiceBlockItem/ServiceBlockItem';
-export { default as VehicleFirstInfoBlock } from './FirstInfoBlock/FirstInfoBlock';
-export { default as SkeletonItem } from './SkeletonItem/SkeletonItem';
-export { default as TabPanel } from './TabPanel/TabPanel';
-
-// legacy composites moved verbatim (their MUI leaves swapped to the md3
-// adapters below — see each component's header).
-export { default as VehicleSmallCard } from './VehicleSmallCard/VehicleSmallCard';
-export { default as VehicleDetailedSlider } from './VehicleDetailedSlider/VehicleDetailedSlider';
-export { default as VehicleDetailedSidebar } from './VehicleDetailedSidebar/VehicleDetailedSidebar';
-export { default as RateSearchWidget } from './RateSearchWidget/RateSearchWidget';
-export { default as RateSearchValue } from './RateSearchValue/RateSearchValue';
-export { default as AccardionSection } from './AccardionSection/AccardionSection';
-export { default as OfferDetailedSection } from './OfferDetailedSection/OfferDetailedSection';
-export { default as OfferPanel } from './OfferPanel/OfferPanel';
-export { default as OfferPeriod } from './OfferPanel/OfferPeriod/OfferPeriod';
-export { default as MuiOfferPeriod } from './OfferPanel/MuiOfferPeriod/MuiOfferPeriod';
-export { default as RangeGroup } from './OfferPanel/RangeGroup/RangeGroup';
-export { default as OfferCheckboxGroup } from './OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup';
-export { default as CheckboxContainer } from './OfferPanel/OfferCheckboxGroup/CheckboxContainer';
-export { default as CookieModal } from './CookieModal/CookieModal';
-export { default as ExpansionPanel } from './ExpansionPanel/ExpansionPanel';
-
-// image-settings admin tooling (fe-main ImageSettingsPage only)
-export * from './ImageSettings';
-
-// ── md3 ADAPTERS (not verbatim legacy) — drop-in replacements for the deleted
-// MUI form controls, rendering the md3 `.mfield`/Dropdown markup instead. ──
-export { default as MdField } from './MdField/MdField';
-export { default as MdSelect } from './MdSelect/MdSelect';
-export { default as MdCheckbox } from './MdCheckbox/MdCheckbox';
-export { default as MdTooltip } from './MdTooltip/MdTooltip';
-export { default as MdTabs } from './MdTabs/MdTabs';
-export { default as MdSwitch } from './MdSwitch/MdSwitch';
-export { default as MdAccordionGroup } from './MdAccordionGroup/MdAccordionGroup';
-export { default as Button } from './Button/Button';
-export { default as Range } from './Range/Range';
-// TimePicker is the legacy scheduling widget kept verbatim; its two inner
-// selects now render through MdSelect (its only MUI dependency).
-export { default as TimePicker } from './TimePicker/TimePicker';
+// @bytebrand/fe-ui-core-autobahn/compat — DESIGN-NEUTRAL LEGACY COMPONENTS,
+// moved verbatim out of @bytebrand/fe-ui-core before its deletion.
+//
+// These are NOT md3 primitives: they render their own markup with co-located
+// .styl (compiled by each consumer's bundler, CSS-modules, no theme injection)
+// and have NO @mui dependency. They exist so the last MUI-free pieces of the
+// legacy design keep one single source. New code should use the md3 kit from
+// the package root (`ui/`, `cards/`, …) instead.
+//
+// NOTE: deliberately NOT re-exported from the package root index.ts — several
+// names (FormCheckbox, Tooltip, …) would clash with the md3 primitives in ui/.
+// Import via `@bytebrand/fe-ui-core-autobahn/compat`.
+
+export { default as Loader } from './Loader/Loader';
+export { default as Image } from './Image/Image';
+export { default as FormattedNumber } from './FormattedNumber/FormattedNumber';
+export { default as VehicleFormattedPrice } from './VehicleFormattedPrice/VehicleFormattedPrice';
+export { default as InfoBlockWrapper } from './InfoBlockWrapper/InfoBlockWrapper';
+export { default as ContactInfo } from './ContactInfo/ContactInfo';
+export { default as ButtonOld } from './ButtonOld/Button';
+
+export { default as Checkbox } from './Checkbox/Checkbox';
+export { default as FormCheckbox } from './Checkbox/FormCheckbox';
+export { default as Tooltip } from './Tooltip/Tooltip';
+export { default as Radio } from './Radio/Radio';
+// legacy alias kept from fe-ui-core's common barrel (RadioButton === Radio)
+export { default as RadioButton } from './Radio/Radio';
+export { default as RadioGroup } from './Radio/RadioGroup';
+
+export { default as AdvantageItem } from './AdvantageItem/AdvantageItem';
+export { default as ImagesSet } from './ImagesSet/ImagesSet';
+export { default as Usp } from './Usp/Usp';
+export { default as CustomerQuote } from './CustomerQuote/CustomerQuote';
+export { default as CustomerQuotesSlider } from './CustomerQuotesSlider/CustomerQuotesSlider';
+export { default as PriceRating } from './PriceRating/PriceRating';
+export { default as PriceRatingDetailed } from './PriceRatingDetailed/PriceRatingDetailed';
+export { default as PricingToolBlock } from './PricingToolBlock/PricingTool';
+export { default as ServiceBlockItem } from './ServiceBlockItem/ServiceBlockItem';
+export { default as VehicleFirstInfoBlock } from './FirstInfoBlock/FirstInfoBlock';
+export { default as SkeletonItem } from './SkeletonItem/SkeletonItem';
+export { default as TabPanel } from './TabPanel/TabPanel';
+
+// legacy composites moved verbatim (their MUI leaves swapped to the md3
+// adapters below — see each component's header).
+export { default as VehicleSmallCard } from './VehicleSmallCard/VehicleSmallCard';
+export { default as VehicleDetailedSlider } from './VehicleDetailedSlider/VehicleDetailedSlider';
+export { default as VehicleDetailedSidebar } from './VehicleDetailedSidebar/VehicleDetailedSidebar';
+export { default as RateSearchWidget } from './RateSearchWidget/RateSearchWidget';
+export { default as RateSearchValue } from './RateSearchValue/RateSearchValue';
+export { default as AccardionSection } from './AccardionSection/AccardionSection';
+export { default as OfferDetailedSection } from './OfferDetailedSection/OfferDetailedSection';
+export { default as OfferPanel } from './OfferPanel/OfferPanel';
+export { default as OfferPeriod } from './OfferPanel/OfferPeriod/OfferPeriod';
+export { default as MuiOfferPeriod } from './OfferPanel/MuiOfferPeriod/MuiOfferPeriod';
+export { default as RangeGroup } from './OfferPanel/RangeGroup/RangeGroup';
+export { default as OfferCheckboxGroup } from './OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup';
+export { default as CheckboxContainer } from './OfferPanel/OfferCheckboxGroup/CheckboxContainer';
+export { default as CookieModal } from './CookieModal/CookieModal';
+export { default as ExpansionPanel } from './ExpansionPanel/ExpansionPanel';
+
+// image-settings admin tooling (fe-main ImageSettingsPage only)
+export * from './ImageSettings';
+
+// ── md3 ADAPTERS (not verbatim legacy) — drop-in replacements for the deleted
+// MUI form controls, rendering the md3 `.mfield`/Dropdown markup instead. ──
+export { default as MdField } from './MdField/MdField';
+export { default as MdSelect } from './MdSelect/MdSelect';
+export { default as MdCheckbox } from './MdCheckbox/MdCheckbox';
+export { default as MdTooltip } from './MdTooltip/MdTooltip';
+export { default as MdTabs } from './MdTabs/MdTabs';
+export { default as MdSwitch } from './MdSwitch/MdSwitch';
+export { default as MdAccordionGroup } from './MdAccordionGroup/MdAccordionGroup';
+export { default as Button } from './Button/Button';
+export { default as Range } from './Range/Range';
+// TimePicker is the legacy scheduling widget kept verbatim; its two inner
+// selects now render through MdSelect (its only MUI dependency).
+export { default as TimePicker } from './TimePicker/TimePicker';

package/compat/legacy-theme/mixins.styl

@@ -1,93 +1,93 @@
-@import './theme.styl'
-
-// to prevent applying both "up" and "down" media queries
-// when device width is equal to exact max-width && min-width value
-// https://www.w3.org/TR/mediaqueries-4/#mq-min-max
-// (keep in mind that solution from CSS spec is not yet widely supported)
-// 0.02px offset is a solution from Bootstrap 4
-$upperBoundOffset = 0.02
-
-container(padding = false)
-  width: 100%
-  max-width: 1100px
-  margin: 0 auto
-  padding: 0
-  if padding
-    padding: 0 7.5px
-    box-sizing: border-box
-
-truncate()
-  white-space nowrap
-  overflow hidden
-  -ms-text-overflow ellipsis
-  text-overflow ellipsis
-
-borderRadius(color = rgba(#000, .1))
-  border-top: 1px solid color;
-  border-bottom: 1px solid color;
-
-  +media-phone-up()
-    border: 1px solid color;
-    border-radius: 2px;
-
-strikethrough()
-  position absolute
-  content ''
-  top: 50%
-  left: 0
-  display: inline-block
-  width: 100%
-  height: 1px
-  background-color $grey-3
-  transform: rotate(170deg)
-
-media-phone-up()
-  @media all and (min-width: $phoneMax )
-    {block}
-
-media-phone-only()
-  @media all and (max-width: $phoneMax - $upperBoundOffset)
-    {block}
-
-media-tablet-up()
-  @media all and (min-width: $tablet)// and (min-height: $tablet)// -- set mobile layout for high resolution in a landscape mode ACF-3974
-    {block}
-
-media-tablet-up-rectangular()
-  @media all and (min-width: $tablet)
-    {block}
-
-// media-tablet-down()
-//   @media all and (max-width: $tablet - $upperBoundOffset)
-//     {block}
-media-tablet-down()
-  @media only screen and (max-device-width: $phoneMaxLandscape) and (max-device-height: $phoneMaxLandscape) 
-    {block}
-
-media-tablet-landscape-up()
-  @media all and (min-width: $tabletLandscape)
-    {block}
-
-media-tablet-landscape-down()
-  @media all and (max-width: $tabletLandscape - $upperBoundOffset)
-    {block}
-
-media-desktop-up()
-  @media all and (min-width: $desktop)
-    {block}
-
-media-desktop-down()
-  @media all and (max-width: $desktop - $upperBoundOffset)
-    {block}
-
-media-big-desktop-up()
-  @media all and (min-width: $desktopBig)
-    {block}
-
-media-landscape()
-  @media (orientation: landscape)
-    {block}
-
-media-portrait()
-  @media (orientation: portrait)
-    {block}
+@import './theme.styl'
+
+// to prevent applying both "up" and "down" media queries
+// when device width is equal to exact max-width && min-width value
+// https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// (keep in mind that solution from CSS spec is not yet widely supported)
+// 0.02px offset is a solution from Bootstrap 4
+$upperBoundOffset = 0.02
+
+container(padding = false)
+  width: 100%
+  max-width: 1100px
+  margin: 0 auto
+  padding: 0
+  if padding
+    padding: 0 7.5px
+    box-sizing: border-box
+
+truncate()
+  white-space nowrap
+  overflow hidden
+  -ms-text-overflow ellipsis
+  text-overflow ellipsis
+
+borderRadius(color = rgba(#000, .1))
+  border-top: 1px solid color;
+  border-bottom: 1px solid color;
+
+  +media-phone-up()
+    border: 1px solid color;
+    border-radius: 2px;
+
+strikethrough()
+  position absolute
+  content ''
+  top: 50%
+  left: 0
+  display: inline-block
+  width: 100%
+  height: 1px
+  background-color $grey-3
+  transform: rotate(170deg)
+
+media-phone-up()
+  @media all and (min-width: $phoneMax )
+    {block}
+
+media-phone-only()
+  @media all and (max-width: $phoneMax - $upperBoundOffset)
+    {block}
+
+media-tablet-up()
+  @media all and (min-width: $tablet)// and (min-height: $tablet)// -- set mobile layout for high resolution in a landscape mode ACF-3974
+    {block}
+
+media-tablet-up-rectangular()
+  @media all and (min-width: $tablet)
+    {block}
+
+// media-tablet-down()
+//   @media all and (max-width: $tablet - $upperBoundOffset)
+//     {block}
+media-tablet-down()
+  @media only screen and (max-device-width: $phoneMaxLandscape) and (max-device-height: $phoneMaxLandscape) 
+    {block}
+
+media-tablet-landscape-up()
+  @media all and (min-width: $tabletLandscape)
+    {block}
+
+media-tablet-landscape-down()
+  @media all and (max-width: $tabletLandscape - $upperBoundOffset)
+    {block}
+
+media-desktop-up()
+  @media all and (min-width: $desktop)
+    {block}
+
+media-desktop-down()
+  @media all and (max-width: $desktop - $upperBoundOffset)
+    {block}
+
+media-big-desktop-up()
+  @media all and (min-width: $desktopBig)
+    {block}
+
+media-landscape()
+  @media (orientation: landscape)
+    {block}
+
+media-portrait()
+  @media (orientation: portrait)
+    {block}

package/compat/legacy-theme/priceReviewColors.styl

@@ -1,12 +1,12 @@
-
-$priceReviewColors = {
-  noRating: rgba(76, 78, 100, 0.22)
-  darkBackground: rgba(76, 78, 100, 0.22)
-  highPrice: rgba(226, 108, 0, 1)
-  increasedPrice: rgba(237, 157, 55, 1)
-  fairPrice: rgba(173, 208, 66, 1)
-  goodPrice: rgba(102, 212, 102, 1)
-  topPrice: rgba(31, 193, 31, 1)
-}
-
-
+
+$priceReviewColors = {
+  noRating: rgba(76, 78, 100, 0.22)
+  darkBackground: rgba(76, 78, 100, 0.22)
+  highPrice: rgba(226, 108, 0, 1)
+  increasedPrice: rgba(237, 157, 55, 1)
+  fairPrice: rgba(173, 208, 66, 1)
+  goodPrice: rgba(102, 212, 102, 1)
+  topPrice: rgba(31, 193, 31, 1)
+}
+
+

package/compat/legacy-theme/slider.global.styl

@@ -1,5 +1,5 @@
-// Verbatim copy of the legacy fe-ui-core source/theme/slider.global.styl:
-// the slick-carousel base + theme CSS the legacy slider components rely on.
-// Imported from consumer .styl files (e.g. fe-landing VehiclePromoSlider.styl).
-@import '~slick-carousel/slick/slick.css';
-@import '~slick-carousel/slick/slick-theme.css';
+// Verbatim copy of the legacy fe-ui-core source/theme/slider.global.styl:
+// the slick-carousel base + theme CSS the legacy slider components rely on.
+// Imported from consumer .styl files (e.g. fe-landing VehiclePromoSlider.styl).
+@import '~slick-carousel/slick/slick.css';
+@import '~slick-carousel/slick/slick-theme.css';

package/compat/legacy-theme/theme.styl

@@ -1,136 +1,136 @@
-/*** FONTS VARIABLES START ***/
-// font styles
-$font-style-arial = Arial, Helvetica, sans-serif
-$font-style-arial-black = "Arial Black", Gadget, sans-serif
-
-$font-weight-default = 400
-$font-size-default = 12px
-
-// font sizes
-$font-size-paragraph = $font-size-default
-$font-size-h6 = 14px
-$font-size-h5 = 16px
-$font-size-h4 = 18px
-$font-size-h3 = 20px
-$font-size-h2 = 22px
-$font-size-h1 = 24px
-
-// font weight
-$font-weight-thin    = 300
-$font-weight-normal  = $font-weight-default
-$font-weight-medium  = 500
-$font-weight-bold    = 600
-$font-weight-bolder  = 800
-/*** FONT VARIABLES END ***/
-
-
-// Color scheme
-$grey-1  = #1F1F1F
-$grey-1e = #1E1E1E
-$grey-3  = #333333
-$grey-32 = #323232
-$grey-3a = #3A3A3A
-$grey-6  = #666666
-$grey-7  = #797979
-$grey-70 = #707070
-$grey-74 = #747474
-$grey-75 = #757575
-$grey-9  = #999999
-$grey-b  = #B0B0B0
-$grey-c  = #CCCCCC
-$grey-d  = #D7D7D7
-$grey-d3 = #D3D3D3
-$grey-e  = #E8E8E8
-$grey-f2 = #F2F2F2
-$grey-f5 = #F5F5F5
-$grey-f8 = #F8F8F8
-$grey-52 = #525252
-$grey-54 = #545454
-$grey-e3 = #e3e3e3
-$grey-e9 = #E9E9E9
-$grey-ef = #efefef
-$grey-ae = #aeaeae
-$grey-d3 = #d3d3d3
-$grey-a3 = #a3a3a3
-$grey-74 = #747474
-$grey-75 = #757575
-$grey-a7 = #a7a7a7
-
-// used mostly for borders and dividers
-$grey-trans   = rgba($grey-d, 0.5)
-
-$skyBlue      = #005CCB
-$blue-10      = #104EC9
-$darkBlue     = #37508f
-$spaceGrey    = #60605F
-
-$primary      = $skyBlue
-$primary70    = rgba($primary, 70%)
-$primary40    = rgba($primary, 40%)
-$primary15    = rgba($primary, 15%)
-$primary8    = rgba($primary, 8%)
-
-$secondary    = $spaceGrey
-$secondary70  = rgba($spaceGrey, 70%)
-$secondary40  = rgba($spaceGrey, 40%)
-$secondary15  = rgba($spaceGrey, 15%)
-
-$blue-eaeef4  = #EAEEF4
-
-$alternative = #00B800
-
-$lightBlue    = #9DA9CC
-$primaryLight = $lightBlue
-$grayBlue     = #C2CEE1
-
-$carrotOrange = #E89F1F
-$yellow       = #CDDC39
-$red          = red
-$darkRed      = #C80000
-$fireRed      = #F50B05
-$orangeText   = #FFCE00
-$orange-fd    = #FD5A1C
-$darkOrange   = #ff0b00
-$white        = #ffffff  
-
-$aqua         = #336666
-$green        = green
-$grassGreen   = #4CAF50
-$wasabiGreen  = #6D9636
-$mantisGreen  = #91C153
-$lightGreen   = #00B800
-$green-2      = #257A05
-
-$yellow-f1    = #F1C40A
-$yellow-ff    = #FFDF4D
-
-$paleViolet   = #DBE1EA
-
-$black        = #000000
-$black30      = rgba($black, 38%)
-$black38      = rgba($black, 38%)
-$black50      = rgba($black, 50%)
-$black60      = rgba($black, 60%)
-$black80      = rgba($black, 87%)
-
-// Z-index master list
-//
-$zIndex-icon           = 99
-$zIndex-dropdown       = 111
-$zIndex-sticky         = 222
-$zIndex-fixed          = 333
-$zIndex-modal-backdrop = 444
-$zIndex-modal          = 555
-$zIndex-popover        = 666
-$zIndex-tooltip        = 777
-
-// media breakpoints
-// with idea of mobile first
-// i.e @media screen and (min-width: $tablet)
-$phoneMax           = 576px
-$tablet             = 768px
-$phoneMaxLandscape  = 992px
-$tabletLandscape    = 992px
-$desktop            = 1200px
-$desktopBig         = 1800px
-$smStart            = 575px
+/*** FONTS VARIABLES START ***/
+// font styles
+$font-style-arial = Arial, Helvetica, sans-serif
+$font-style-arial-black = "Arial Black", Gadget, sans-serif
+
+$font-weight-default = 400
+$font-size-default = 12px
+
+// font sizes
+$font-size-paragraph = $font-size-default
+$font-size-h6 = 14px
+$font-size-h5 = 16px
+$font-size-h4 = 18px
+$font-size-h3 = 20px
+$font-size-h2 = 22px
+$font-size-h1 = 24px
+
+// font weight
+$font-weight-thin    = 300
+$font-weight-normal  = $font-weight-default
+$font-weight-medium  = 500
+$font-weight-bold    = 600
+$font-weight-bolder  = 800
+/*** FONT VARIABLES END ***/
+
+
+// Color scheme
+$grey-1  = #1F1F1F
+$grey-1e = #1E1E1E
+$grey-3  = #333333
+$grey-32 = #323232
+$grey-3a = #3A3A3A
+$grey-6  = #666666
+$grey-7  = #797979
+$grey-70 = #707070
+$grey-74 = #747474
+$grey-75 = #757575
+$grey-9  = #999999
+$grey-b  = #B0B0B0
+$grey-c  = #CCCCCC
+$grey-d  = #D7D7D7
+$grey-d3 = #D3D3D3
+$grey-e  = #E8E8E8
+$grey-f2 = #F2F2F2
+$grey-f5 = #F5F5F5
+$grey-f8 = #F8F8F8
+$grey-52 = #525252
+$grey-54 = #545454
+$grey-e3 = #e3e3e3
+$grey-e9 = #E9E9E9
+$grey-ef = #efefef
+$grey-ae = #aeaeae
+$grey-d3 = #d3d3d3
+$grey-a3 = #a3a3a3
+$grey-74 = #747474
+$grey-75 = #757575
+$grey-a7 = #a7a7a7
+
+// used mostly for borders and dividers
+$grey-trans   = rgba($grey-d, 0.5)
+
+$skyBlue      = #005CCB
+$blue-10      = #104EC9
+$darkBlue     = #37508f
+$spaceGrey    = #60605F
+
+$primary      = $skyBlue
+$primary70    = rgba($primary, 70%)
+$primary40    = rgba($primary, 40%)
+$primary15    = rgba($primary, 15%)
+$primary8    = rgba($primary, 8%)
+
+$secondary    = $spaceGrey
+$secondary70  = rgba($spaceGrey, 70%)
+$secondary40  = rgba($spaceGrey, 40%)
+$secondary15  = rgba($spaceGrey, 15%)
+
+$blue-eaeef4  = #EAEEF4
+
+$alternative = #00B800
+
+$lightBlue    = #9DA9CC
+$primaryLight = $lightBlue
+$grayBlue     = #C2CEE1
+
+$carrotOrange = #E89F1F
+$yellow       = #CDDC39
+$red          = red
+$darkRed      = #C80000
+$fireRed      = #F50B05
+$orangeText   = #FFCE00
+$orange-fd    = #FD5A1C
+$darkOrange   = #ff0b00
+$white        = #ffffff  
+
+$aqua         = #336666
+$green        = green
+$grassGreen   = #4CAF50
+$wasabiGreen  = #6D9636
+$mantisGreen  = #91C153
+$lightGreen   = #00B800
+$green-2      = #257A05
+
+$yellow-f1    = #F1C40A
+$yellow-ff    = #FFDF4D
+
+$paleViolet   = #DBE1EA
+
+$black        = #000000
+$black30      = rgba($black, 38%)
+$black38      = rgba($black, 38%)
+$black50      = rgba($black, 50%)
+$black60      = rgba($black, 60%)
+$black80      = rgba($black, 87%)
+
+// Z-index master list
+//
+$zIndex-icon           = 99
+$zIndex-dropdown       = 111
+$zIndex-sticky         = 222
+$zIndex-fixed          = 333
+$zIndex-modal-backdrop = 444
+$zIndex-modal          = 555
+$zIndex-popover        = 666
+$zIndex-tooltip        = 777
+
+// media breakpoints
+// with idea of mobile first
+// i.e @media screen and (min-width: $tablet)
+$phoneMax           = 576px
+$tablet             = 768px
+$phoneMaxLandscape  = 992px
+$tabletLandscape    = 992px
+$desktop            = 1200px
+$desktopBig         = 1800px
+$smStart            = 575px