From 1272456ab2cb77f29b27f3839563b09a709cbc06 Mon Sep 17 00:00:00 2001 From: Vitalii Lysak Date: Wed, 13 Jul 2022 15:46:06 +0300 Subject: move sila-dev to _sila --- src/assets/styles/bmc/_sila/helpers/_colors.scss | 75 ++++++++++++++++++++++ .../styles/bmc/_sila/helpers/_functions.scss | 9 +++ src/assets/styles/bmc/_sila/helpers/_index.scss | 4 ++ src/assets/styles/bmc/_sila/helpers/_motion.scss | 14 ++++ .../styles/bmc/_sila/helpers/_variables.scss | 24 +++++++ 5 files changed, 126 insertions(+) create mode 100644 src/assets/styles/bmc/_sila/helpers/_colors.scss create mode 100644 src/assets/styles/bmc/_sila/helpers/_functions.scss create mode 100644 src/assets/styles/bmc/_sila/helpers/_index.scss create mode 100644 src/assets/styles/bmc/_sila/helpers/_motion.scss create mode 100644 src/assets/styles/bmc/_sila/helpers/_variables.scss (limited to 'src/assets/styles/bmc/_sila/helpers') diff --git a/src/assets/styles/bmc/_sila/helpers/_colors.scss b/src/assets/styles/bmc/_sila/helpers/_colors.scss new file mode 100644 index 00000000..028d962b --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_colors.scss @@ -0,0 +1,75 @@ +// Sass Color Variables +$black: #000; +$white: #FFFFFF; + +$blue-500: #2d60e5; +$green-500: #4EBF19; +$red-500: #FF4141; +$yellow-500: #F0AC0C; +$dark-blue: #1A3E5B; + +$gray-100: #f4f4f4; +$gray-200: #e6e6e6; +$gray-300: #d8d8d8; +$gray-400: #cccccc; +$gray-500: #b3b3b3; +$gray-600: #999999; +$gray-700: #666666; +$gray-800: #3f3f3f; +$gray-900: #161616; + + +// Sass Base Color Variables +$blue: $blue-500; +$green: $green-500; +$red: $red-500; +$yellow: $yellow-500; + +// Sass Theme Color Variables +// Can be used as variants +$danger: $red; +$dark: $dark-blue; +$info: $blue; +$light: $white; +$primary: $dark-blue; +$secondary: #1A3E5B; +$success: $green; +$warning: $yellow; + +$loading-color: $primary; +$navbar-color: $primary; + +$login-page-description-color: rgba(12, 28, 41, 0.6); + +$text-primary: #0C1C29; +$text-secondary: #0C1C29E5; +$text-tretiatry: rgba(12, 28, 41, 0.6); +$text-quaternary: rgba(12, 28, 41, 0.3); + +$indicators-errors: #FF4141; +$indicators-succes: #4EBF19; +$indicators-warning: #F0AC0C; +$indicators-complementary:rgba(26, 62, 91, 0.6);; + +$on-surface-primary: #040A0F; + +$surface-secondary: #F3F4F5; +$on-surface-secondary: rgba(4, 10, 15, 0.6); +$on-surface-tretiatry: #040A0F4D; + +$faint-secondary-primary-1: rgba(26, 62, 91, 0.01); +$faint-secondary-primary-2: rgba(26, 62, 91, 0.02); +$faint-secondary-primary-2-hover: rgba(26, 62, 91, 0.03); + +$faint-secondary-primary-5: rgba(26, 62, 91, 0.05); +$faint-secondary-primary-5-hover: rgba(20, 39, 53, 0.1); +$faint-secondary-primary-10: rgba(26, 62, 91, 0.1); +$faint-secondary-primary-20: rgba(26, 62, 91, 0.2); +$faint-brand-primary-40:rgba(225, 23, 23, 0.4); + +$red-brand-primary: #E11717; +$red-brand-primary-hover: #FC2A2A; +$red-brand-primary-active: #df2323; +$red-brand-primary-disabled: #E17171; +$red-brand-primary-click: #C71414; +$red-brand-primary-5: rgba(225, 23, 23, 0.05); diff --git a/src/assets/styles/bmc/_sila/helpers/_functions.scss b/src/assets/styles/bmc/_sila/helpers/_functions.scss new file mode 100644 index 00000000..57956c99 --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_functions.scss @@ -0,0 +1,9 @@ +// This function is usually used to get a lighter +// theme variant color to use as a background color +@function theme-color-light($variant) { + @return theme-color-level($variant, -11.3); +} + +@function theme-color-dark($variant) { + @return theme-color-level($variant, 2); +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_index.scss b/src/assets/styles/bmc/_sila/helpers/_index.scss new file mode 100644 index 00000000..ce0631a7 --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_index.scss @@ -0,0 +1,4 @@ +@import "./colors"; +@import "./motion"; +@import "./variables"; +@import "./functions"; \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_motion.scss b/src/assets/styles/bmc/_sila/helpers/_motion.scss new file mode 100644 index 00000000..55a3eed9 --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_motion.scss @@ -0,0 +1,14 @@ +$duration--fast-01: 70ms; //Micro-interactions such as button and toggle +$duration--fast-02: 110ms; //Micro-interactions such as fade +$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements +$duration--moderate-02: 240ms; //Expansion, system communication, toast +$duration--slow-01: 400ms; //Large expansion, important system notifications +$duration--slow-02: 700ms; //Background dimming + +// https://www.carbondesignsystem.com/guidelines/motion/basics/#easing +$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9); +$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1); +$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9); +$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1); +$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9); +$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1); \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_variables.scss b/src/assets/styles/bmc/_sila/helpers/_variables.scss new file mode 100644 index 00000000..9e3a3aed --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_variables.scss @@ -0,0 +1,24 @@ +// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss +$enable-rounded: false; +$enable-validation-icons: false; +$transition-base: all $duration--moderate-02 $standard-easing--productive; +$transition-fade: opacity $duration--moderate-01 $standard-easing--productive; +$transition-collapse: height $duration--slow-01 $standard-easing--expressive; + +// OpenBMC Custom Variables +$responsive-layout-bp: lg; +$first-header-height: 48px; +$second-header-height: 39px; +$header-height: 87px; +$headerHeight: 40px; +$navigation-width: 320px; +$toolbar-height: 60px; +$form-label-font-size: .875rem; +$form-line-height: 1.25rem; +$box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); +$focus-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, +border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + +// :export { +// headerHeight: $header-height; +// } \ No newline at end of file -- cgit v1.2.3