Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

N°7793 Add common SCSS variables between backoffice and end-user portal #674

Merged
merged 10 commits into from
Nov 6, 2024
Merged

N°7793 Add common SCSS variables between backoffice and end-user portal #674

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a4e272f
N°7793 Add common SCSS variables between backoffice and end-user portal
steffunky Oct 31, 2024
6fe1751
Add shame & readme
steffunky Nov 4, 2024
f0b7d8a
Move font face to common
steffunky Nov 4, 2024
4777af4
Inherit color functions
steffunky Nov 4, 2024
23be28a
Move font icon to common
steffunky Nov 4, 2024
30e7b5e
FIx breaking change introduced in lifecycle palette
steffunky Nov 4, 2024
4df6b8e
FIx breaking change introduced in base
steffunky Nov 4, 2024
eab75fc
Move approot url to common
steffunky Nov 4, 2024
d938ecc
Make highlightjs common variables more coherent with 3.2.1 commonizat…
steffunky Nov 4, 2024
fe4e87c
Deprecated and migrate the usage of ibo-adjust-alpha and ibo-adjust-l…
steffunky Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 0 additions & 144 deletions css/backoffice/base/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,147 +4,3 @@
*/

/* This is an overload of the default lib. stylesheet to use local fonts instead of the CDN */
@font-face {
font-family: Raleway;
font-weight: 100;
font-style: normal;
font-display: swap;
src: local('Raleway Thin'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-100-normal.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 100;
font-style: italic;
font-display: swap;
src: local('Raleway Thin'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-100-italic.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 200;
font-style: normal;
font-display: swap;
src: local('Raleway ExtraLight'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-200-normal.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 200;
font-style: italic;
font-display: swap;
src: local('Raleway ExtraLight'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-200-italic.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 300;
font-style: normal;
font-display: swap;
src: local('Raleway Light'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-300-normal.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 300;
font-style: italic;
font-display: swap;
src: local('Raleway Light'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-300-italic.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 400;
font-style: normal;
font-display: swap;
src: local('Raleway'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-400-normal.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 400;
font-style: italic;
font-display: swap;
src: local('Raleway'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-400-italic.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 500;
font-style: normal;
font-display: swap;
src: local('Raleway Medium'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-500-normal.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 500;
font-style: italic;
font-display: swap;
src: local('Raleway Medium'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-500-italic.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 600;
font-style: normal;
font-display: swap;
src: local('Raleway SemiBold'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-600-normal.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 600;
font-style: italic;
font-display: swap;
src: local('Raleway SemiBold'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-600-italic.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 700;
font-style: normal;
font-display: swap;
src: local('Raleway'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-700-normal.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 700;
font-style: italic;
font-display: swap;
src: local('Raleway'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-700-italic.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 800;
font-style: normal;
font-display: swap;
src: local('Raleway ExtraBold'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-800-normal.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 800;
font-style: italic;
font-display: swap;
src: local('Raleway ExtraBold'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-800-italic.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 900;
font-style: normal;
font-display: swap;
src: local('Raleway Black'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-900-normal.woff') format('woff'),
}
@font-face {
font-family: Raleway;
font-weight: 900;
font-style: italic;
font-display: swap;
src: local('Raleway Black'),
url($approot-relative + 'node_modules/@fontsource/raleway/files/raleway-all-900-italic.woff') format('woff'),
}
14 changes: 2 additions & 12 deletions css/backoffice/utils/functions/_color.scss
View file
Open in desktop
steffunky marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,7 @@
* @return Modified color value in HSLA format
*/
@function ibo-adjust-lightness($sColor, $fTargetLightness) {
$iHue: hue($sColor);
$fSaturation: saturation($sColor);
$fLightness: lightness($sColor);
$fAlpha: alpha($sColor);

@return hsla($iHue, $fSaturation, $fTargetLightness, $fAlpha);
@return common-adjust-lightness($sColor, $fTargetLightness);
}

/**
Expand All @@ -25,10 +20,5 @@
* @return Modified color value in HSLA format
*/
@function ibo-adjust-alpha($sColor, $fTargetAlpha) {
$iHue: hue($sColor);
$fSaturation: saturation($sColor);
$fLightness: lightness($sColor);
$fAlpha: alpha($sColor);

@return hsla($iHue, $fSaturation, $fLightness, $fTargetAlpha);
@return common-adjust-alpha($sColor, $fTargetAlpha);
}
33 changes: 0 additions & 33 deletions css/backoffice/utils/helpers/_font-icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,3 @@
/* To use it, simply "@extend %fa-regular-base" in a rule and put the desired icon "content: '\f054'" */
/******************************************************************************************************************************/

%fa-regular-base{
font-family: "Font Awesome 5 Free";
font-weight: 400;

-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
%fa-solid-base{
font-family: "Font Awesome 5 Free";
font-weight: 900;

-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
%fc-regular-base{
display: inline-block;
font-family: CombodoRegular;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
2 changes: 1 addition & 1 deletion css/backoffice/utils/variables/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@

// These are the base variables used throughout the backoffice, if you don't know what to use, these are probably good :)

$ibo-base-variable--text-color: $common-base-variable--text-color !default;
$ibo-base-variable--text-color: $ibo-color-grey-900 !default;
$ibo-base-variable--border-radius: $ibo-border-radius-300 !default;;
1 change: 0 additions & 1 deletion css/backoffice/utils/variables/_path.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,3 @@
* @license http://opensource.org/licenses/AGPL-3.0
*/

$approot-relative: '../../../../' !default;
32 changes: 16 additions & 16 deletions css/backoffice/utils/variables/colors/_lifecycle-palette.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,24 @@

/* Lifecycle palette */
/* - For workflow */
$ibo-lifecycle-new-state-primary-color: $common-lifecycle-new-state-primary-color !default;
$ibo-lifecycle-new-state-secondary-color: $common-lifecycle-new-state-secondary-color !default;
$ibo-lifecycle-neutral-state-primary-color: $common-lifecycle-neutral-state-primary-color !default;
$ibo-lifecycle-neutral-state-secondary-color: $common-lifecycle-neutral-state-secondary-color !default;
$ibo-lifecycle-waiting-state-primary-color: $common-lifecycle-waiting-state-primary-color !default;
$ibo-lifecycle-waiting-state-secondary-color: $common-lifecycle-waiting-state-secondary-color !default;
$ibo-lifecycle-success-state-primary-color: $common-lifecycle-success-state-primary-color !default;
$ibo-lifecycle-success-state-secondary-color: $common-lifecycle-success-state-secondary-color !default;
$ibo-lifecycle-failure-state-primary-color: $common-lifecycle-failure-state-primary-color !default;
$ibo-lifecycle-failure-state-secondary-color: $common-lifecycle-failure-state-secondary-color !default;
$ibo-lifecycle-frozen-state-primary-color: $common-lifecycle-frozen-state-primary-color !default;
$ibo-lifecycle-frozen-state-secondary-color: $common-lifecycle-frozen-state-secondary-color !default;
$ibo-lifecycle-new-state-primary-color: $ibo-color-blue-800 !default;
$ibo-lifecycle-new-state-secondary-color: $ibo-color-white-100 !default;
$ibo-lifecycle-neutral-state-primary-color: $ibo-color-blue-800 !default;
$ibo-lifecycle-neutral-state-secondary-color: $ibo-color-white-100 !default;
$ibo-lifecycle-waiting-state-primary-color: $ibo-color-orange-400 !default;
$ibo-lifecycle-waiting-state-secondary-color: $ibo-color-white-100 !default;
$ibo-lifecycle-success-state-primary-color: $ibo-color-green-700 !default;
$ibo-lifecycle-success-state-secondary-color: $ibo-color-white-100 !default;
$ibo-lifecycle-failure-state-primary-color: $ibo-color-pink-700 !default;
$ibo-lifecycle-failure-state-secondary-color: $ibo-color-white-100 !default;
$ibo-lifecycle-frozen-state-primary-color: $ibo-color-grey-200 !default;
$ibo-lifecycle-frozen-state-secondary-color: $ibo-color-grey-700 !default;

/* - For basic lifecycle */
$ibo-lifecycle-active-state-primary-color: $common-lifecycle-active-state-primary-color !default;
$ibo-lifecycle-active-state-secondary-color: $common-lifecycle-active-state-secondary-color !default;
$ibo-lifecycle-inactive-state-primary-color: $common-lifecycle-inactive-state-primary-color !default;
$ibo-lifecycle-inactive-state-secondary-color: $common-lifecycle-inactive-state-secondary-color !default;
$ibo-lifecycle-active-state-primary-color: $ibo-color-green-700 !default;
$ibo-lifecycle-active-state-secondary-color: $ibo-color-white-100 !default;
$ibo-lifecycle-inactive-state-primary-color: $ibo-color-orange-400 !default;
$ibo-lifecycle-inactive-state-secondary-color: $ibo-color-white-100 !default;

$ibo-lifecycle-states-colors: (
'new': (
Expand Down
Loading