From 3ed8c945d1cb9f6bbd074645aacf423bc090461b Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 19 Dec 2024 17:53:23 +0100 Subject: [PATCH 01/59] fix: remove obsolete css vars --- src/scss/base/_root.scss | 79 +++++----------------------------------- 1 file changed, 10 insertions(+), 69 deletions(-) diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss index e64ae04e5..f229a2865 100644 --- a/src/scss/base/_root.scss +++ b/src/scss/base/_root.scss @@ -1,73 +1,14 @@ :root { // Note: Custom variable values only support SassScript inside `#{}`. - // Colors - // - // Generate palettes for full colors, grays, and theme colors. - - @each $color, $value in $colors { - --#{$prefix}#{$color}: #{$value}; - } - - @each $color, $value in $grays { - --#{$prefix}gray-#{$color}: #{$value}; - } - - @each $color, $value in $theme-colors { - --#{$prefix}#{$color}: #{$value}; - } - - @each $color, $value in $theme-colors-rgb { - --#{$prefix}#{$color}-rgb: #{$value}; - } - - --#{$prefix}white-rgb: #{to-rgb($white)}; - --#{$prefix}black-rgb: #{to-rgb($black)}; - --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; - --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; - - // Fonts - - // Note: Use `inspect` for lists so that quoted items keep the quotes. - // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 - --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; - --#{$prefix}font-monospace: #{inspect($font-family-monospace)}; - --#{$prefix}gradient: #{$gradient}; - - // Root and body - // scss-docs-start root-body-variables - @if $font-size-root != null { - --#{$prefix}root-font-size: #{$font-size-root}; - } - --#{$prefix}body-font-family: #{$font-family-base}; - @include rfs($font-size-base, --#{$prefix}body-font-size); - --#{$prefix}body-font-weight: #{$font-weight-base}; - --#{$prefix}body-line-height: #{$line-height-base}; - --#{$prefix}body-color: #{$body-color}; - @if $body-text-align != null { - --#{$prefix}body-text-align: #{$body-text-align}; - } - --#{$prefix}body-bg: #{$body-bg}; - // scss-docs-end root-body-variables - - // scss-docs-start root-border-var - --#{$prefix}border-width: #{$border-width}; - --#{$prefix}border-style: #{$border-style}; - --#{$prefix}border-color: #{$border-color}; - --#{$prefix}border-color-translucent: #{$border-color-translucent}; - - --#{$prefix}border-radius: #{$border-radius}; - --#{$prefix}border-radius-sm: #{$border-radius-sm}; - --#{$prefix}border-radius-lg: #{$border-radius-lg}; - --#{$prefix}border-radius-xl: #{$border-radius-xl}; - --#{$prefix}border-radius-2xl: #{$border-radius-2xl}; - --#{$prefix}border-radius-pill: #{$border-radius-pill}; - // scss-docs-end root-border-var - - --#{$prefix}link-color: #{$link-color}; - --#{$prefix}link-hover-color: #{$link-hover-color}; - - --#{$prefix}code-color: #{$code-color}; - - --#{$prefix}highlight-bg: #{$mark-bg}; + // THEME COLORS + // 1. Theme primary colors are used for primary buttons, links, and more. + // 2. They reference the “theme italia“ palette in the design system .italia. + // 3. Change the $prefix variable in "_variables.scss" to customize the theme name in the CSS custom properties. + // 4. Customize these values to change the theme colors throughout your project. + --#{$prefix}-primary: cssToken.var(--theme-italia-base); + --#{$prefix}-primary-muted: cssToken.var(--theme-italia-muted); + --#{$prefix}-primary-dark: cssToken.var(--theme-italia-dark); + --#{$prefix}-primary-light: cssToken.var(--theme-italia-light); + --#{$prefix}-primary-lighter: cssToken.var(--theme-italia-lighter); } From 143b5dcd7ea12d86213ca9597beba082dd3261b3 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 19 Dec 2024 17:54:37 +0100 Subject: [PATCH 02/59] fix: remove obsolete sass vars --- src/scss/base/_variables.scss | 392 ++-------------------------------- 1 file changed, 20 insertions(+), 372 deletions(-) diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss index 0725da7fd..3b3ec2c2b 100644 --- a/src/scss/base/_variables.scss +++ b/src/scss/base/_variables.scss @@ -1,41 +1,12 @@ -// Import Design Tokens Italia -// @import '../../node_modules/design-tokens-italia/scss/variables'; - -// Color vars -// HSB (https://it.wikipedia.org/wiki/Hue_Saturation_Brightness, coincidente con il modello HSV) -// è lo spazio colore scelto per ottenere le varianti colore della tonalità primaria. +// SETTING PREFIX +// Use $prefix variable to set a custom prefix for the CSS variables. +// This is useful when you want to scope the library to a specific theme name. +// If you set $prefix: 'my-theme-', the primary color variable will be --my-theme-primary. +$prefix: 'bsi-' !default; // Color system ============================================================== -$black: hsl(0, 0%, 0%) !default; -$white: hsl(0, 0%, 100%) !default; - -$gray-100: hsl(0, 0%, 96%) !default; // color-gray-96 -$gray-200: hsl(0, 0%, 90%) !default; // color-gray-90 -$gray-300: hsl(0, 0%, 83%) !default; // color-gray-83 -$gray-400: hsl(0, 0%, 64%) !default; // color-gray-64 -$gray-500: hsl(0, 0%, 45%) !default; // color-gray-45 -$gray-600: hsl(0, 0%, 32%) !default; // color-gray-32 -$gray-700: hsl(0, 0%, 25%) !default; // color-gray-25 -$gray-800: hsl(0, 0%, 15%) !default; // color-gray-15 -$gray-900: hsl(0, 0%, 10%) !default; // color-gray-10 - -$grays: () !default; -$grays: map-merge( - ( - '100': $gray-100, - '200': $gray-200, - '300': $gray-300, - '400': $gray-400, - '500': $gray-500, - '600': $gray-600, - '700': $gray-700, - '800': $gray-800, - '900': $gray-900, - ), - $grays -); - +// TODO: What does this do? @function main($key: '80') { @return map-get($mains, $key); } @@ -45,71 +16,19 @@ $grays: map-merge( $min-contrast-ratio: 4.5 !default; // Customize the light and dark text colors for use in our color contrast function. -$color-contrast-dark: $black !default; -$color-contrast-light: $white !default; - -// PRIMARY COLORS DEFINITION // -$primary-h: 210 !default; -$primary-s: 100 !default; -$primary-b: 80 !default; -$primary-l: 40 !default; // Kit UI - -$primary: hsb($primary-h, $primary-s, $primary-b) !default; // color-blue-40 - -$indigo: hsb(243, 70, 100) !default; -$purple: hsb(243, 40, 100) !default; -$pink: hsb(350, 30, 100) !default; -$red: hsl(350, 60%, 50%) !default; // color-red-50 -$orange: hsl(36, 100%, 30%) !default; // color-orange-30 -$yellow: hsb(44, 55, 100) !default; -$green: hsl(160, 100%, 25%) !default; // color-emerald-25 -$teal: hsl(178, 90%, 32%) !default; -$cyan: hsb(178, 100, 100) !default; -$blue: hsb(210, 100, 90) !default; -$light: hsb(255, 5, 95) !default; -$dark: hsl(210, 54%, 20%) !default; // color-slate-20 - -$yiq-text-light: $white !default; -$yiq-text-dark: $black !default; - -$red-accessible: $red !default; -$orange-accessible: $orange !default; -$yellow-accessible: hsb(44, 100, 59) !default; -$green-accessible: $green !default; - -$gray-primary: hsb(210, 38.9, 44.3) !default; -$gray-secondary: hsl(210, 17%, 44%) !default; // color-slate-44 -$gray-tertiary: hsb(205, 35, 54) !default; -$gray-quaternary: hsb(238, 1, 100) !default; -$gray-border: hsl(210, 4%, 78%) !default; // color-border-subtle -$gray-disabled: hsl(210, 3%, 85%) !default; // color-background-disabled -$gray-label-disabled: hsl(210, 12%, 44%) !default; // color-text-disabled -$gray-border-disabled: $gray-disabled !default; // color-border-disabled - -$secondary: $gray-secondary !default; - -$colors: () !default; -$colors: map-merge( - ( - 'indigo': $indigo, - 'purple': $purple, - 'pink': $pink, - 'red': $red, - 'orange': $orange, - 'yellow': $yellow, - 'green': $green, - 'teal': $teal, - 'cyan': $cyan, - 'white': $white, - 'gray': $gray-600, - 'gray-dark': $gray-800, - 'blue': $blue, - 'gray-secondary': $gray-secondary, - 'gray-tertiary': $gray-tertiary, - 'gray-quaternary': $gray-quaternary, - ), - $colors -); +$color-contrast-dark: sassToken.$color-black !default; +$color-contrast-light: sassToken.$color-white !default; + +$yiq-text-light: sassToken.$color-text-inverse !default; +$yiq-text-dark: sassToken.$color-text-base !default; + +// $gray-secondary: hsl(210, 17%, 44%) !default; // color-slate-44 +// $gray-tertiary: hsb(205, 35, 54) !default; +// $gray-quaternary: hsb(238, 1, 100) !default; +// $gray-border: hsl(210, 4%, 78%) !default; // color-border-subtle +// $gray-disabled: hsl(210, 3%, 85%) !default; // color-background-disabled +// $gray-label-disabled: hsl(210, 12%, 44%) !default; // color-text-disabled +// $gray-border-disabled: $gray-disabled !default; // color-border-disabled // Border Color $border-color: $gray-border !default; @@ -120,69 +39,9 @@ $info: $secondary !default; $warning: $orange-accessible !default; $danger: $red-accessible !default; -$theme-colors: () !default; -$theme-colors: map-merge( - ( - 'primary': $primary, - 'secondary': $secondary, - 'success': $success, - 'info': $info, - 'warning': $warning, - 'danger': $danger, - 'light': $light, - 'dark': $dark, - 'black': $black, - 'white': $white, - '100': $gray-100, - '200': $gray-200, - '300': $gray-300, - '400': $gray-400, - '500': $gray-500, - '600': $gray-600, - '700': $gray-700, - '800': $gray-800, - '900': $gray-900, - ), - $theme-colors -); - // Characters which are escaped by the escape-svg function $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default; -// ACCENT COLORS DEFINITIONS -// analoghi -$analogue-1-h: 243; -$analogue-1-s: 85; -$analogue-1-b: 100; -$analogue-1: hsb($analogue-1-h, $analogue-1-s, $analogue-1-b) !default; -$analogue-2-h: 178; -$analogue-2-s: 95; -$analogue-2-b: 85; -$analogue-2: hsb($analogue-2-h, $analogue-2-s, $analogue-2-b) !default; -// Complementari e triadici -$complementary-1-h: 351; -$complementary-1-s: 75; -$complementary-1-b: 97; -$complementary-1: hsb($complementary-1-h, $complementary-1-s, $complementary-1-b) !default; -$complementary-2-h: 36; -$complementary-2-s: 100; -$complementary-2-b: 100; -$complementary-2: hsb($complementary-2-h, $complementary-2-s, $complementary-2-b) !default; -$complementary-3-h: 159; -$complementary-3-s: 100; -$complementary-3-b: 81; -$complementary-3: hsb($complementary-3-h, $complementary-3-s, $complementary-3-b) !default; - -// NEUTRAL COLORS DEFINITIONS -$neutral-1-h: 210; -$neutral-1-s: 70; -$neutral-1-b: 30; -$neutral-1: hsb($neutral-1-h, $neutral-1-s, $neutral-1-b) !default; -$neutral-2-h: 210; -$neutral-2-s: 5; -$neutral-2-b: 95; -$neutral-2: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b) !default; - // Light Greys A $lightgrey-a1: hsl(210, 3%, 85%); // progress-background-default $lightgrey-a2: #edf5fc; @@ -199,213 +58,7 @@ $lightgrey-b4: #f2f6fa; $lightgrey-c1: #f7f9fa; $lightgrey-c2: hsl(210, 62%, 97%); // color-background-primary-lighter; -//*********************************************************************** -//********************Primary color variations*************************** -//*********************************************************************** - -//-------------------------Tinta e ombre--------------------------------- -$primary-a12: hsb($primary-h, $primary-s, 20) !default; -$primary-a11: hsb($primary-h, $primary-s, 30) !default; -$primary-a10: hsb($primary-h, $primary-s, 40) !default; -$primary-a9: hsb($primary-h, $primary-s, 50) !default; -$primary-a8: hsb($primary-h, $primary-s, 60) !default; -$primary-a7: hsb($primary-h, $primary-s, 70) !default; -$primary-a6: hsb($primary-h, $primary-s, 80) !default; -$primary-a5: hsb($primary-h, $primary-s - 15, 84) !default; -$primary-a4: hsb($primary-h, $primary-s - 30, 88) !default; -$primary-a3: hsb($primary-h, $primary-s - 45, 92) !default; -$primary-a2: hsb($primary-h + 1, $primary-s - 60, 96) !default; -$primary-a1: hsb($primary-h, $primary-s - 75, 99) !default; - -//-------------------------Toni------------------------------------------ -$primary-b1: hsb($primary-h, $primary-s, $primary-b) !default; -$primary-b2: hsb($primary-h, $primary-s - 10, $primary-b - 10) !default; -$primary-b3: hsb($primary-h, $primary-s - 20, $primary-b - 20) !default; -$primary-b4: hsb($primary-h, $primary-s - 30, $primary-b - 30) !default; -$primary-b5: hsb($primary-h, $primary-s - 40, $primary-b - 40) !default; -$primary-b6: hsb($primary-h, $primary-s - 50, $primary-b - 50) !default; -$primary-b7: hsb($primary-h, $primary-s - 60, $primary-b - 60) !default; -$primary-b8: hsb($primary-h, $primary-s - 70, $primary-b - 70) !default; - -//-------------------------Saturazione------------------------------------------ -$primary-c1: hsb($primary-h, $primary-s - calc($primary-s * 90 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; -$primary-c2: hsb($primary-h, $primary-s - calc($primary-s * 80 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; -$primary-c3: hsb($primary-h, $primary-s - calc($primary-s * 70 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; -$primary-c4: hsb($primary-h, $primary-s - calc($primary-s * 60 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; -$primary-c5: hsb($primary-h, $primary-s - calc($primary-s * 50 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; -$primary-c6: hsb($primary-h, $primary-s - calc($primary-s * 40 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; -$primary-c7: hsb($primary-h, $primary-s - calc($primary-s * 30 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; -$primary-c8: hsb($primary-h, $primary-s - calc($primary-s * 20 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; -$primary-c9: hsb($primary-h, $primary-s - calc($primary-s * 10 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; -$primary-c10: hsb($primary-h, $primary-s, $primary-b + calc($primary-b * 20 / 100)) !default; -$primary-c11: hsb($primary-h, $primary-s, $primary-b + calc($primary-b * 10 / 100)) !default; -$primary-c12: hsb($primary-h, $primary-s, $primary-b) !default; - -//*********************************************************************** -//********************Accent colors variations*************************** -//*********************************************************************** -// analoghi -// tinte e ombre -/***************************** 1 ****************************************/ -$analogue-1-a12: hsb($analogue-1-h, $analogue-1-s, 20) !default; -$analogue-1-a11: hsb($analogue-1-h, $analogue-1-s, 30) !default; -$analogue-1-a10: hsb($analogue-1-h, $analogue-1-s, 40) !default; -$analogue-1-a9: hsb($analogue-1-h, $analogue-1-s, 50) !default; -$analogue-1-a8: hsb($analogue-1-h, $analogue-1-s, 60) !default; -$analogue-1-a7: hsb($analogue-1-h, $analogue-1-s, 70) !default; -$analogue-1-a6: hsb($analogue-1-h, $analogue-1-s, 80) !default; -$analogue-1-a5: hsb($analogue-1-h, $analogue-1-s - 15, 84) !default; -$analogue-1-a4: hsb($analogue-1-h, $analogue-1-s - 30, 88) !default; -$analogue-1-a3: hsb($analogue-1-h, $analogue-1-s - 45, 92) !default; -$analogue-1-a2: hsb($analogue-1-h, $analogue-1-s - 60, 96) !default; -$analogue-1-a1: hsb($analogue-1-h, $analogue-1-s - 75, 100) !default; - -/***************************** 2 ****************************************/ -$analogue-2-a12: hsb($analogue-2-h, $analogue-2-s, 20) !default; -$analogue-2-a11: hsb($analogue-2-h, $analogue-2-s, 30) !default; -$analogue-2-a10: hsb($analogue-2-h, $analogue-2-s, 40) !default; -$analogue-2-a9: hsb($analogue-2-h, $analogue-2-s, 50) !default; -$analogue-2-a8: hsb($analogue-2-h, $analogue-2-s, 60) !default; -$analogue-2-a7: hsb($analogue-2-h, $analogue-2-s, 70) !default; -$analogue-2-a6: hsb($analogue-2-h, $analogue-2-s, 80) !default; -$analogue-2-a5: hsb($analogue-2-h, $analogue-2-s - 15, 84) !default; -$analogue-2-a4: hsb($analogue-2-h, $analogue-2-s - 30, 88) !default; -$analogue-2-a3: hsb($analogue-2-h, $analogue-2-s - 45, 92) !default; -$analogue-2-a2: hsb($analogue-2-h, $analogue-2-s - 60, 96) !default; -$analogue-2-a1: hsb($analogue-2-h, $analogue-2-s - 75, 100) !default; - -// toni -/***************************** 1 ****************************************/ -$analogue-1-b1: hsb($analogue-1-h, $analogue-1-s, $analogue-1-b) !default; -$analogue-1-b2: hsb($analogue-1-h, $analogue-1-s - 10, $analogue-1-b - 10) !default; -$analogue-1-b3: hsb($analogue-1-h, $analogue-1-s - 20, $analogue-1-b - 20) !default; -$analogue-1-b4: hsb($analogue-1-h, $analogue-1-s - 30, $analogue-1-b - 30) !default; -$analogue-1-b5: hsb($analogue-1-h, $analogue-1-s - 40, $analogue-1-b - 40) !default; -$analogue-1-b6: hsb($analogue-1-h, $analogue-1-s - 50, $analogue-1-b - 50) !default; -$analogue-1-b7: hsb($analogue-1-h, $analogue-1-s - 60, $analogue-1-b - 60) !default; -$analogue-1-b8: hsb($analogue-1-h, $analogue-1-s - 70, $analogue-1-b - 70) !default; - -/***************************** 2 ****************************************/ -$analogue-2-b1: hsb($analogue-2-h, $analogue-2-s, $analogue-2-b) !default; -$analogue-2-b2: hsb($analogue-2-h, $analogue-2-s - 10, $analogue-2-b - 10) !default; -$analogue-2-b3: hsb($analogue-2-h, $analogue-2-s - 20, $analogue-2-b - 20) !default; -$analogue-2-b4: hsb($analogue-2-h, $analogue-2-s - 30, $analogue-2-b - 30) !default; -$analogue-2-b5: hsb($analogue-2-h, $analogue-2-s - 40, $analogue-2-b - 40) !default; -$analogue-2-b6: hsb($analogue-2-h, $analogue-2-s - 50, $analogue-2-b - 50) !default; -$analogue-2-b7: hsb($analogue-2-h, $analogue-2-s - 60, $analogue-2-b - 60) !default; -$analogue-2-b8: hsb($analogue-2-h, $analogue-2-s - 70, $analogue-2-b - 70) !default; - -// complementari -// tinte e ombre -/***************************** 1 ****************************************/ -$complementary-1-a12: hsb($complementary-1-h, $complementary-1-s, 20) !default; -$complementary-1-a11: hsb($complementary-1-h, $complementary-1-s, 30) !default; -$complementary-1-a10: hsb($complementary-1-h, $complementary-1-s, 40) !default; -$complementary-1-a9: hsb($complementary-1-h, $complementary-1-s, 50) !default; -$complementary-1-a8: hsb($complementary-1-h, $complementary-1-s, 60) !default; -$complementary-1-a7: hsb($complementary-1-h, $complementary-1-s, 70) !default; -$complementary-1-a6: hsb($complementary-1-h, $complementary-1-s, 80) !default; -$complementary-1-a5: hsb($complementary-1-h, $complementary-1-s - 15, 84) !default; -$complementary-1-a4: hsb($complementary-1-h, $complementary-1-s - 30, 88) !default; -$complementary-1-a3: hsb($complementary-1-h, $complementary-1-s - 45, 92) !default; -$complementary-1-a2: hsb($complementary-1-h, $complementary-1-s - 60, 96) !default; -$complementary-1-a1: hsb($complementary-1-h, $complementary-1-s - 75, 100) !default; - -/***************************** 2 ****************************************/ -$complementary-2-a12: hsb($complementary-2-h, $complementary-2-s, 20) !default; -$complementary-2-a11: hsb($complementary-2-h, $complementary-2-s, 30) !default; -$complementary-2-a10: hsb($complementary-2-h, $complementary-2-s, 40) !default; -$complementary-2-a9: hsb($complementary-2-h, $complementary-2-s, 50) !default; -$complementary-2-a8: hsb($complementary-2-h, $complementary-2-s, 60) !default; -$complementary-2-a7: hsb($complementary-2-h, $complementary-2-s, 70) !default; -$complementary-2-a6: hsb($complementary-2-h, $complementary-2-s, 80) !default; -$complementary-2-a5: hsb($complementary-2-h, $complementary-2-s - 15, 84) !default; -$complementary-2-a4: hsb($complementary-2-h, $complementary-2-s - 30, 88) !default; -$complementary-2-a3: hsb($complementary-2-h, $complementary-2-s - 45, 92) !default; -$complementary-2-a2: hsb($complementary-2-h, $complementary-2-s - 60, 96) !default; -$complementary-2-a1: hsb($complementary-2-h, $complementary-2-s - 75, 100) !default; - -/***************************** 3 ****************************************/ -$complementary-3-a12: hsb($complementary-3-h, $complementary-3-s, 20) !default; -$complementary-3-a11: hsb($complementary-3-h, $complementary-3-s, 30) !default; -$complementary-3-a10: hsb($complementary-3-h, $complementary-3-s, 40) !default; -$complementary-3-a9: hsb($complementary-3-h, $complementary-3-s, 50) !default; -$complementary-3-a8: hsb($complementary-3-h, $complementary-3-s, 60) !default; -$complementary-3-a7: hsb($complementary-3-h, $complementary-3-s, 70) !default; -$complementary-3-a6: hsb($complementary-3-h, $complementary-3-s, 80) !default; -$complementary-3-a5: hsb($complementary-3-h, $complementary-3-s - 15, 84) !default; -$complementary-3-a4: hsb($complementary-3-h, $complementary-3-s - 30, 88) !default; -$complementary-3-a3: hsb($complementary-3-h, $complementary-3-s - 45, 92) !default; -$complementary-3-a2: hsb($complementary-3-h, $complementary-3-s - 60, 96) !default; -$complementary-3-a1: hsb($complementary-3-h, $complementary-3-s - 75, 100) !default; - -//-------------------------- toni ----------------------------------------- -/***************************** 1 ****************************************/ -$complementary-1-b1: hsb($complementary-1-h, $complementary-1-s, $complementary-1-b) !default; -$complementary-1-b2: hsb($complementary-1-h, $complementary-1-s - 10, $complementary-1-b - 10) !default; -$complementary-1-b3: hsb($complementary-1-h, $complementary-1-s - 20, $complementary-1-b - 20) !default; -$complementary-1-b4: hsb($complementary-1-h, $complementary-1-s - 30, $complementary-1-b - 30) !default; -$complementary-1-b5: hsb($complementary-1-h, $complementary-1-s - 40, $complementary-1-b - 40) !default; -$complementary-1-b6: hsb($complementary-1-h, $complementary-1-s - 50, $complementary-1-b - 50) !default; -$complementary-1-b7: hsb($complementary-1-h, $complementary-1-s - 60, $complementary-1-b - 60) !default; -$complementary-1-b8: hsb($complementary-1-h, $complementary-1-s - 70, $complementary-1-b - 70) !default; - -/***************************** 2 ****************************************/ -$complementary-2-b1: hsb($complementary-2-h, $complementary-2-s, $complementary-2-b) !default; -$complementary-2-b2: hsb($complementary-2-h, $complementary-2-s - 10, $complementary-2-b - 10) !default; -$complementary-2-b3: hsb($complementary-2-h, $complementary-2-s - 20, $complementary-2-b - 20) !default; -$complementary-2-b4: hsb($complementary-2-h, $complementary-2-s - 30, $complementary-2-b - 30) !default; -$complementary-2-b5: hsb($complementary-2-h, $complementary-2-s - 40, $complementary-2-b - 40) !default; -$complementary-2-b6: hsb($complementary-2-h, $complementary-2-s - 50, $complementary-2-b - 50) !default; -$complementary-2-b7: hsb($complementary-2-h, $complementary-2-s - 60, $complementary-2-b - 60) !default; -$complementary-2-b8: hsb($complementary-2-h, $complementary-2-s - 70, $complementary-2-b - 70) !default; - -/***************************** 3 ****************************************/ -$complementary-3-b1: hsb($complementary-3-h, $complementary-3-s, $complementary-3-b) !default; -$complementary-3-b2: hsb($complementary-3-h, $complementary-3-s - 10, $complementary-3-b - 10) !default; -$complementary-3-b3: hsb($complementary-3-h, $complementary-3-s - 20, $complementary-3-b - 20) !default; -$complementary-3-b4: hsb($complementary-3-h, $complementary-3-s - 30, $complementary-3-b - 30) !default; -$complementary-3-b5: hsb($complementary-3-h, $complementary-3-s - 40, $complementary-3-b - 40) !default; -$complementary-3-b6: hsb($complementary-3-h, $complementary-3-s - 50, $complementary-3-b - 50) !default; -$complementary-3-b7: hsb($complementary-3-h, $complementary-3-s - 60, $complementary-3-b - 60) !default; -$complementary-3-b8: hsb($complementary-3-h, $complementary-3-s - 70, $complementary-3-b - 70) !default; - -//*********************************************************************** -//********************Neutral color variations*************************** -//*********************************************************************** - -// tinte e ombre -/***************************** NEUTRAL 1 ****************************************/ -$neutral-1-a10: hsb($neutral-1-h, $neutral-1-s, $neutral-1-b) !default; -$neutral-1-a9: hsb($neutral-1-h, $neutral-1-s - 20, $neutral-1-b + 7) !default; -$neutral-1-a8: hsb($neutral-1-h, $neutral-1-s - 30, $neutral-1-b + 14) !default; -$neutral-1-a7: hsb($neutral-1-h, $neutral-1-s - 40, $neutral-1-b + 21) !default; -$neutral-1-a6: hsb($neutral-1-h, $neutral-1-s - 50, $neutral-1-b + 28) !default; -$neutral-1-a5: hsb($neutral-1-h, $neutral-1-s - 60, $neutral-1-b + 35) !default; -$neutral-1-a4: hsb($neutral-1-h, $neutral-1-s - 64, $neutral-1-b + 42) !default; -$neutral-1-a3: hsb($neutral-1-h, $neutral-1-s - 68, $neutral-1-b + 49) !default; -$neutral-1-a2: hsb($neutral-1-h, $neutral-1-s - 71, $neutral-1-b + 56) !default; -$neutral-1-a1: hsb($neutral-1-h, $neutral-1-s - 73, $neutral-1-b + 63) !default; - -/***************************** NEUTRAL 2 ****************************************/ -$neutral-2-b1: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b) !default; -$neutral-2-b2: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b - 15) !default; -$neutral-2-b3: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b - 30) !default; -$neutral-2-b4: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b - 45) !default; -$neutral-2-b5: hsb($neutral-2-h, $neutral-2-s - 1, $neutral-2-b - 60) !default; -$neutral-2-b6: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 75) !default; -$neutral-2-b7: hsb($neutral-2-h, $neutral-2-s + 4, $neutral-2-b - 90) !default; - -/***************************** NEUTRAL 2 / 3 ****************************************/ -$neutral-2-a1: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b) !default; -$neutral-2-a2: hsb($neutral-2-h, $neutral-2-s + 3, $neutral-2-b - 15) !default; -$neutral-2-a3: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 30) !default; -$neutral-2-a4: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 45) !default; -$neutral-2-a5: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 60) !default; -$neutral-2-a6: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 75) !default; -$neutral-2-a7: hsb($neutral-2-h, $neutral-2-s + 4, $neutral-2-b - 85) !default; - -//==================== DESIGN TOKENS VARIABLES ============================// + // SEMANTIC TOKENS ========================================================= @@ -464,11 +117,6 @@ $enable-negative-margins: false !default; $enable-deprecation-messages: true !default; $enable-important-utilities: true !default; -// Prefix for :root CSS variables - -$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix` -$prefix: $variable-prefix !default; - // Spacing // // Control the default styling of most Bootstrap elements by modifying these From 76ee3e245dc75f7b2f60e07a1166a9fe7300b255 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 19 Dec 2024 17:54:58 +0100 Subject: [PATCH 03/59] feat: import tokens in variables section --- src/scss/bootstrap-italia.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/scss/bootstrap-italia.scss b/src/scss/bootstrap-italia.scss index dbee660a0..f799f445f 100644 --- a/src/scss/bootstrap-italia.scss +++ b/src/scss/bootstrap-italia.scss @@ -9,7 +9,11 @@ @import 'base/functions'; // ------------------------------ -// Variables +// Settings & Variables +// Variables from the design tokens are imported here. +@use "../../../node_modules/design-tokens-italia/css/_variables.css" as cssToken; +@use '../../../node_modules/design-tokens-italia/scss/_variables' as sassToken; +@import 'base/root'; @import 'base/variables'; // ------------------------------ @@ -20,7 +24,6 @@ // ------------------------------ // Layout -@import 'base/root'; @import 'base/reboot'; @import 'base/containers'; @import 'base/transitions'; From b81b944d0b894644f552634c0213adbc7f534723 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 19 Dec 2024 17:55:13 +0100 Subject: [PATCH 04/59] fix: disable gradients mixin as not used --- src/scss/base/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss index b03f10e2f..f637065c3 100644 --- a/src/scss/base/_mixins.scss +++ b/src/scss/base/_mixins.scss @@ -35,7 +35,7 @@ // Skins @import 'mixins/border-radius'; @import 'mixins/box-shadow'; -@import 'mixins/gradients'; +// @import 'mixins/gradients'; // Disabled as not used in the project @import 'mixins/transition'; // Layout From 69f3aece119be577354a758b1facb6ab896fd5c7 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 20 Dec 2024 15:42:35 +0100 Subject: [PATCH 05/59] feat: add css vars --- src/scss/base/_root.scss | 252 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 240 insertions(+), 12 deletions(-) diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss index f229a2865..320864843 100644 --- a/src/scss/base/_root.scss +++ b/src/scss/base/_root.scss @@ -1,14 +1,242 @@ :root { - // Note: Custom variable values only support SassScript inside `#{}`. - - // THEME COLORS - // 1. Theme primary colors are used for primary buttons, links, and more. - // 2. They reference the “theme italia“ palette in the design system .italia. - // 3. Change the $prefix variable in "_variables.scss" to customize the theme name in the CSS custom properties. - // 4. Customize these values to change the theme colors throughout your project. - --#{$prefix}-primary: cssToken.var(--theme-italia-base); - --#{$prefix}-primary-muted: cssToken.var(--theme-italia-muted); - --#{$prefix}-primary-dark: cssToken.var(--theme-italia-dark); - --#{$prefix}-primary-light: cssToken.var(--theme-italia-light); - --#{$prefix}-primary-lighter: cssToken.var(--theme-italia-lighter); + // theme colors + // 1. theme primary colors are used for primary buttons, links, and more. + // 2. they reference the “theme italia“ palette in the design system .italia. + // 3. change the $prefix cssToken.variable in "_variables.scss" to customize the theme name in the CSS custom properties. + // 4. customize these values to change the theme colors throughout your project. + --#{$prefix}-theme-primary: cssToken.var(--theme-italia-base); + --#{$prefix}-theme-primary-muted: cssToken.var(--theme-italia-muted); + --#{$prefix}-theme-primary-dark: cssToken.var(--theme-italia-dark); + --#{$prefix}-theme-primary-light: cssToken.var(--theme-italia-light); + --#{$prefix}-theme-primary-lighter: cssToken.var(--theme-italia-lighter); + // spacing + --#{$prefix}-spacing-24x: cssToken.var(--spacing-24x); + --#{$prefix}-spacing-12x: cssToken.var(--spacing-12x); + --#{$prefix}-spacing-10x: cssToken.var(--spacing-10x); + --#{$prefix}-spacing-8x: cssToken.var(--spacing-8x); + --#{$prefix}-spacing-6x: cssToken.var(--spacing-6x); + --#{$prefix}-spacing-5x: cssToken.var(--spacing-5x); + --#{$prefix}-spacing-4x: cssToken.var(--spacing-4x); + --#{$prefix}-spacing-3x: cssToken.var(--spacing-3x); + --#{$prefix}-spacing-2x: cssToken.var(--spacing-2x); + --#{$prefix}-spacing-1x: cssToken.var(--spacing-1x); + --#{$prefix}-spacing-inset-3xl: cssToken.var(--spacing-inset-3xl); + --#{$prefix}-spacing-inset-xxl: cssToken.var(--spacing-inset-xxl); + --#{$prefix}-spacing-inset-xl: cssToken.var(--spacing-inset-xl); + --#{$prefix}-spacing-inset-l: cssToken.var(--spacing-inset-l); + --#{$prefix}-spacing-inset-m: cssToken.var(--spacing-inset-m); + --#{$prefix}-spacing-inset-s: cssToken.var(--spacing-inset-s); + --#{$prefix}-spacing-inset-xs: cssToken.var(--spacing-inset-xs); + --#{$prefix}-spacing-inline-l: cssToken.var(--spacing-inline-l); + --#{$prefix}-spacing-inline-m: cssToken.var(--spacing-inline-m); + --#{$prefix}-spacing-inline-s: cssToken.var(--spacing-inline-s); + --#{$prefix}-spacing-inline-xs: cssToken.var(--spacing-inline-xs); + --#{$prefix}-spacing-inline-xxs: cssToken.var(--spacing-inline-xxs); + --#{$prefix}-spacing-stack-xxl: cssToken.var(--spacing-stack-xxl); + --#{$prefix}-spacing-stack-xl: cssToken.var(--spacing-stack-xl); + --#{$prefix}-spacing-stack-l: cssToken.var(--spacing-stack-l); + --#{$prefix}-spacing-stack-m: cssToken.var(--spacing-stack-m); + --#{$prefix}-spacing-stack-s: cssToken.var(--spacing-stack-s); + --#{$prefix}-spacing-stack-xs: cssToken.var(--spacing-stack-xs); + // typography + --#{$prefix}-font-mono: cssToken.var(--font-mono); + --#{$prefix}-font-serif: cssToken.var(--font-serif); + --#{$prefix}-font-sans: cssToken.var(--font-sans); + --#{$prefix}-font-weight-bold: cssToken.var(--font-weight-bold); + --#{$prefix}-font-weight-semibold: cssToken.var(--font-weight-semibold); + --#{$prefix}-font-weight-regular: cssToken.var(--font-weight-regular); + --#{$prefix}-font-weight-light: cssToken.var(--font-weight-light); + --#{$prefix}-font-weight-extra-light: cssToken.var(--font-weight-extra-light); + --#{$prefix}-font-size-10: cssToken.var(--font-size-10); + --#{$prefix}-font-size-9: cssToken.var(--font-size-9); + --#{$prefix}-font-size-8: cssToken.var(--font-size-8); + --#{$prefix}-font-size-7: cssToken.var(--font-size-7); + --#{$prefix}-font-size-6: cssToken.var(--font-size-6); + --#{$prefix}-font-size-5: cssToken.var(--font-size-5); + --#{$prefix}-font-size-4: cssToken.var(--font-size-4); + --#{$prefix}-font-size-3: cssToken.var(--font-size-3); + --#{$prefix}-font-size-2: cssToken.var(--font-size-2); + --#{$prefix}-font-size-1: cssToken.var(--font-size-1); + --#{$prefix}-font-line-height-7: cssToken.var(--font-line-height-7); + --#{$prefix}-font-line-height-6: cssToken.var(--font-line-height-6); + --#{$prefix}-font-line-height-5: cssToken.var(--font-line-height-5); + --#{$prefix}-font-line-height-4: cssToken.var(--font-line-height-4); + --#{$prefix}-font-line-height-3: cssToken.var(--font-line-height-3); + --#{$prefix}-font-line-height-2: cssToken.var(--font-line-height-2); + --#{$prefix}-font-line-height-1: cssToken.var(--font-line-height-1); + --#{$prefix}-font-tracking-normal: cssToken.var(--font-tracking-normal); + --#{$prefix}-font-tracking-tight: cssToken.var(--font-tracking-tight); + --#{$prefix}-font-tracking-narrow: cssToken.var(--font-tracking-narrow); + --#{$prefix}-font-tracking-short: cssToken.var(--font-tracking-short); + --#{$prefix}-body-font-serif: cssToken.var(--body-font-serif); + --#{$prefix}-body-font-mono: cssToken.var(--body-font-mono); + --#{$prefix}-body-font-sans: cssToken.var(--body-font-sans); + --#{$prefix}-caption-font: cssToken.var(--caption-font); + --#{$prefix}-lead-line-height-l: cssToken.var(--lead-line-height-l); + --#{$prefix}-lead-line-height: cssToken.var(--lead-line-height); + --#{$prefix}-body-line-height-l: cssToken.var(--body-line-height-l); + --#{$prefix}-heading-6-line-height-l: cssToken.var(--heading-6-line-height-l); + --#{$prefix}-heading-5-line-height-l: cssToken.var(--heading-5-line-height-l); + --#{$prefix}-heading-4-line-height-l: cssToken.var(--heading-4-line-height-l); + --#{$prefix}-heading-3-line-height-l: cssToken.var(--heading-3-line-height-l); + --#{$prefix}-heading-2-line-height-l: cssToken.var(--heading-2-line-height-l); + --#{$prefix}-heading-1-line-height-l: cssToken.var(--heading-1-line-height-l); + --#{$prefix}-caption-line-height: cssToken.var(--caption-line-height); + --#{$prefix}-body-line-height: cssToken.var(--body-line-height); + --#{$prefix}-heading-6-line-height: cssToken.var(--heading-6-line-height); + --#{$prefix}-heading-5-line-height: cssToken.var(--heading-5-line-height); + --#{$prefix}-heading-4-line-height: cssToken.var(--heading-4-line-height); + --#{$prefix}-heading-3-line-height: cssToken.var(--heading-3-line-height); + --#{$prefix}-heading-2-line-height: cssToken.var(--heading-2-line-height); + --#{$prefix}-heading-1-line-height: cssToken.var(--heading-1-line-height); + --#{$prefix}-lead-font-size-l: cssToken.var(--lead-font-size-l); + --#{$prefix}-lead-font-size: cssToken.var(--lead-font-size); + --#{$prefix}-heading-6-font-size-l: cssToken.var(--heading-6-font-size-l); + --#{$prefix}-heading-5-font-size-l: cssToken.var(--heading-5-font-size-l); + --#{$prefix}-heading-4-font-size-l: cssToken.var(--heading-4-font-size-l); + --#{$prefix}-heading-3-font-size-l: cssToken.var(--heading-3-font-size-l); + --#{$prefix}-heading-2-font-size-l: cssToken.var(--heading-2-font-size-l); + --#{$prefix}-heading-1-font-size-l: cssToken.var(--heading-1-font-size-l); + --#{$prefix}-caption-font-size: cssToken.var(--caption-font-size); + --#{$prefix}-body-font-size-l: cssToken.var(--body-font-size-l); + --#{$prefix}-body-font-size: cssToken.var(--body-font-size); + --#{$prefix}-heading-6-font-size: cssToken.var(--heading-6-font-size); + --#{$prefix}-heading-5-font-size: cssToken.var(--heading-5-font-size); + --#{$prefix}-heading-4-font-size: cssToken.var(--heading-4-font-size); + --#{$prefix}-heading-3-font-size: cssToken.var(--heading-3-font-size); + --#{$prefix}-heading-2-font-size: cssToken.var(--heading-2-font-size); + --#{$prefix}-heading-1-font-size: cssToken.var(--heading-1-font-size); + --#{$prefix}-lead-font-weight: cssToken.var(--lead-font-weight); + --#{$prefix}-caption-font-weight-regular: cssToken.var(--caption-font-weight-regular); + --#{$prefix}-caption-font-weight-semibold: cssToken.var(--caption-font-weight-semibold); + --#{$prefix}-body-font-weight: cssToken.var(--body-font-weight); + --#{$prefix}-heading-6-font-weight: cssToken.var(--heading-6-font-weight); + --#{$prefix}-heading-5-font-weight: cssToken.var(--heading-5-font-weight); + --#{$prefix}-heading-4-font-weight: cssToken.var(--heading-4-font-weight); + --#{$prefix}-heading-3-font-weight: cssToken.var(--heading-3-font-weight); + --#{$prefix}-heading-2-font-weight: cssToken.var(--heading-2-font-weight); + --#{$prefix}-heading-1-font-weight: cssToken.var(--heading-1-font-weight); + --#{$prefix}-color-outline-focus: cssToken.var(--color-outline-focus); + --#{$prefix}-color-text-accent: cssToken.var(--color-text-accent); + --#{$prefix}-icon-size-xxl: cssToken.var(--icon-size-xxl); + --#{$prefix}-icon-size-xl: cssToken.var(--icon-size-xl); + --#{$prefix}-icon-size-l: cssToken.var(--icon-size-l); + --#{$prefix}-icon-size-m: cssToken.var(--icon-size-m); + --#{$prefix}-icon-size-s: cssToken.var(--icon-size-s); + --#{$prefix}-border-broad: cssToken.var(--border-broad); + --#{$prefix}-border-thick: cssToken.var(--border-thick); + --#{$prefix}-border-double: cssToken.var(--border-double); + --#{$prefix}-border-base: cssToken.var(--border-base); + --#{$prefix}-radius-rounded: cssToken.var(--radius-rounded); + --#{$prefix}-radius-circle: cssToken.var(--radius-circle); + --#{$prefix}-radius-smooth: cssToken.var(--radius-smooth); + --#{$prefix}-sizing-full: cssToken.var(--sizing-full); + --#{$prefix}-sizing-two-thirds: cssToken.var(--sizing-two-thirds); + --#{$prefix}-sizing-half: cssToken.var(--sizing-half); + --#{$prefix}-sizing-quarter: cssToken.var(--sizing-quarter); + --#{$prefix}-shadow-l-type: cssToken.var(--shadow-l-type); + --#{$prefix}-shadow-l-color: cssToken.var(--shadow-l-color); + --#{$prefix}-shadow-l-spread: cssToken.var(--shadow-l-spread); + --#{$prefix}-shadow-l-blur: cssToken.var(--shadow-l-blur); + --#{$prefix}-shadow-l-y: cssToken.var(--shadow-l-y); + --#{$prefix}-shadow-l-x: cssToken.var(--shadow-l-x); + --#{$prefix}-shadow-m-type: cssToken.var(--shadow-m-type); + --#{$prefix}-shadow-m-color: cssToken.var(--shadow-m-color); + --#{$prefix}-shadow-m-spread: cssToken.var(--shadow-m-spread); + --#{$prefix}-shadow-m-blur: cssToken.var(--shadow-m-blur); + --#{$prefix}-shadow-m-y: cssToken.var(--shadow-m-y); + --#{$prefix}-shadow-m-x: cssToken.var(--shadow-m-x); + --#{$prefix}-shadow-s-type: cssToken.var(--shadow-s-type); + --#{$prefix}-shadow-s-color: cssToken.var(--shadow-s-color); + --#{$prefix}-shadow-s-spread: cssToken.var(--shadow-s-spread); + --#{$prefix}-shadow-s-blur: cssToken.var(--shadow-s-blur); + --#{$prefix}-shadow-s-y: cssToken.var(--shadow-s-y); + --#{$prefix}-shadow-s-x: cssToken.var(--shadow-s-x); + // colors + --#{$prefix}-color-text-inverse: cssToken.var(--color-text-inverse); + --#{$prefix}-color-text-error-active: cssToken.var(--color-text-error-active); + --#{$prefix}-color-text-error-hover: cssToken.var(--color-text-error-hover); + --#{$prefix}-color-text-error: cssToken.var(--color-text-error); + --#{$prefix}-color-text-warning-active: cssToken.var(--color-text-warning-active); + --#{$prefix}-color-text-warning-hover: cssToken.var(--color-text-warning-hover); + --#{$prefix}-color-text-warning: cssToken.var(--color-text-warning); + --#{$prefix}-color-text-success-active: cssToken.var(--color-text-success-active); + --#{$prefix}-color-text-success-hover: cssToken.var(--color-text-success-hover); + --#{$prefix}-color-text-success: cssToken.var(--color-text-success); + --#{$prefix}-color-text-disabled: cssToken.var(--color-text-disabled); + --#{$prefix}-color-text-muted: cssToken.var(--color-text-muted); + --#{$prefix}-color-text-secondary-active: cssToken.var(--color-text-secondary-active); + --#{$prefix}-color-text-secondary-hover: cssToken.var(--color-text-secondary-hover); + --#{$prefix}-color-text-secondary: cssToken.var(--color-text-secondary); + --#{$prefix}-color-text-primary-active: cssToken.var(--color-text-primary-active); + --#{$prefix}-color-text-primary-hover: cssToken.var(--color-text-primary-hover); + --#{$prefix}-color-text-primary: cssToken.var(--color-text-primary); + --#{$prefix}-color-text-base: cssToken.var(--color-text-base); + --#{$prefix}-color-border-error-active: cssToken.var(--color-border-error-active); + --#{$prefix}-color-border-error-hover: cssToken.var(--color-border-error-hover); + --#{$prefix}-color-border-error: cssToken.var(--color-border-error); + --#{$prefix}-color-border-warning-active: cssToken.var(--color-border-warning-active); + --#{$prefix}-color-border-warning-hover: cssToken.var(--color-border-warning-hover); + --#{$prefix}-color-border-warning: cssToken.var(--color-border-warning); + --#{$prefix}-color-border-success-active: cssToken.var(--color-border-success-active); + --#{$prefix}-color-border-success-hover: cssToken.var(--color-border-success-hover); + --#{$prefix}-color-border-success: cssToken.var(--color-border-success); + --#{$prefix}-color-border-subtle: cssToken.var(--color-border-subtle); + --#{$prefix}-color-border-disabled: cssToken.var(--color-border-disabled); + --#{$prefix}-color-border-inverse: cssToken.var(--color-border-inverse); + --#{$prefix}-color-border-secondary-active: cssToken.var(--color-border-secondary-active); + --#{$prefix}-color-border-secondary-hover: cssToken.var(--color-border-secondary-hover); + --#{$prefix}-color-border-secondary: cssToken.var(--color-border-secondary); + --#{$prefix}-color-border-primary-active: cssToken.var(--color-border-primary-active); + --#{$prefix}-color-border-primary-hover: cssToken.var(--color-border-primary-hover); + --#{$prefix}-color-border-primary: cssToken.var(--color-border-primary); + --#{$prefix}-color-background-primary-dark: cssToken.var(--color-background-primary-dark); + --#{$prefix}-color-background-primary-muted: cssToken.var(--color-background-primary-muted); + --#{$prefix}-color-background-error-active: cssToken.var(--color-background-error-active); + --#{$prefix}-color-background-error-hover: cssToken.var(--color-background-error-hover); + --#{$prefix}-color-background-error-light: cssToken.var(--color-background-error-light); + --#{$prefix}-color-background-error: cssToken.var(--color-background-error); + --#{$prefix}-color-background-warning-active: cssToken.var(--color-background-warning-active); + --#{$prefix}-color-background-warning-hover: cssToken.var(--color-background-warning-hover); + --#{$prefix}-color-background-warning-light: cssToken.var(--color-background-warning-light); + --#{$prefix}-color-background-warning: cssToken.var(--color-background-warning); + --#{$prefix}-color-background-success-active: cssToken.var(--color-background-success-active); + --#{$prefix}-color-background-success-hover: cssToken.var(--color-background-success-hover); + --#{$prefix}-color-background-success-light: cssToken.var(--color-background-success-light); + --#{$prefix}-color-background-success: cssToken.var(--color-background-success); + --#{$prefix}-color-background-emphasis: cssToken.var(--color-background-emphasis); + --#{$prefix}-color-background-subtle: cssToken.var(--color-background-subtle); + --#{$prefix}-color-background-disabled: cssToken.var(--color-background-disabled); + --#{$prefix}-color-background-inverse: cssToken.var(--color-background-inverse); + --#{$prefix}-color-background-muted: cssToken.var(--color-background-muted); + --#{$prefix}-color-background-accent-hover: cssToken.var(--color-background-accent-hover); + --#{$prefix}-color-background-accent: cssToken.var(--color-background-accent); + --#{$prefix}-color-background-secondary-lighter: cssToken.var(--color-background-secondary-lighter); + --#{$prefix}-color-background-secondary-light: cssToken.var(--color-background-secondary-light); + --#{$prefix}-color-background-secondary-active: cssToken.var(--color-background-secondary-active); + --#{$prefix}-color-background-secondary-hover: cssToken.var(--color-background-secondary-hover); + --#{$prefix}-color-background-secondary: cssToken.var(--color-background-secondary); + --#{$prefix}-color-background-primary-active: cssToken.var(--color-background-primary-active); + --#{$prefix}-color-background-primary-hover: cssToken.var(--color-background-primary-hover); + --#{$prefix}-color-background-primary-lighter: cssToken.var(--color-background-primary-lighter); + --#{$prefix}-color-background-primary-light: cssToken.var(--color-background-primary-light); + --#{$prefix}-color-background-primary: cssToken.var(--color-background-primary); + --#{$prefix}-icon-inverse: cssToken.var(--icon-inverse); + // icons + --#{$prefix}-icon-error-active: cssToken.var(--icon-error-active); + --#{$prefix}-icon-error-hover: cssToken.var(--icon-error-hover); + --#{$prefix}-icon-error: cssToken.var(--icon-error); + --#{$prefix}-icon-warning-active: cssToken.var(--icon-warning-active); + --#{$prefix}-icon-warning-hover: cssToken.var(--icon-warning-hover); + --#{$prefix}-icon-warning: cssToken.var(--icon-warning); + --#{$prefix}-icon-success-active: cssToken.var(--icon-success-active); + --#{$prefix}-icon-success-hover: cssToken.var(--icon-success-hover); + --#{$prefix}-icon-success: cssToken.var(--icon-success); + --#{$prefix}-icon-secondary-active: cssToken.var(--icon-secondary-active); + --#{$prefix}-icon-secondary-hover: cssToken.var(--icon-secondary-hover); + --#{$prefix}-icon-secondary: cssToken.var(--icon-secondary); + --#{$prefix}-icon-primary-active: cssToken.var(--icon-primary-active); + --#{$prefix}-icon-primary-hover: cssToken.var(--icon-primary-hover); + --#{$prefix}-icon-primary: cssToken.var(--icon-primary); + --#{$prefix}-icon-default: cssToken.var(--icon-default); } From a0b28148a826cd1963d5de4fc233fbd81bde9567 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 27 Dec 2024 16:04:23 +0100 Subject: [PATCH 06/59] feat: remove sass prefix --- src/scss/base/_root.scss | 447 ++++++++++++++++------------------ src/scss/base/_variables.scss | 77 +++--- 2 files changed, 251 insertions(+), 273 deletions(-) diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss index 320864843..d8a1ee0a2 100644 --- a/src/scss/base/_root.scss +++ b/src/scss/base/_root.scss @@ -4,239 +4,224 @@ // 2. they reference the “theme italia“ palette in the design system .italia. // 3. change the $prefix cssToken.variable in "_variables.scss" to customize the theme name in the CSS custom properties. // 4. customize these values to change the theme colors throughout your project. - --#{$prefix}-theme-primary: cssToken.var(--theme-italia-base); - --#{$prefix}-theme-primary-muted: cssToken.var(--theme-italia-muted); - --#{$prefix}-theme-primary-dark: cssToken.var(--theme-italia-dark); - --#{$prefix}-theme-primary-light: cssToken.var(--theme-italia-light); - --#{$prefix}-theme-primary-lighter: cssToken.var(--theme-italia-lighter); + --bsi-theme-primary: cssToken.var(--theme-italia-base); + --bsi-theme-primary-muted: cssToken.var(--theme-italia-muted); + --bsi-theme-primary-dark: cssToken.var(--theme-italia-dark); + --bsi-theme-primary-light: cssToken.var(--theme-italia-light); + --bsi-theme-primary-lighter: cssToken.var(--theme-italia-lighter); // spacing - --#{$prefix}-spacing-24x: cssToken.var(--spacing-24x); - --#{$prefix}-spacing-12x: cssToken.var(--spacing-12x); - --#{$prefix}-spacing-10x: cssToken.var(--spacing-10x); - --#{$prefix}-spacing-8x: cssToken.var(--spacing-8x); - --#{$prefix}-spacing-6x: cssToken.var(--spacing-6x); - --#{$prefix}-spacing-5x: cssToken.var(--spacing-5x); - --#{$prefix}-spacing-4x: cssToken.var(--spacing-4x); - --#{$prefix}-spacing-3x: cssToken.var(--spacing-3x); - --#{$prefix}-spacing-2x: cssToken.var(--spacing-2x); - --#{$prefix}-spacing-1x: cssToken.var(--spacing-1x); - --#{$prefix}-spacing-inset-3xl: cssToken.var(--spacing-inset-3xl); - --#{$prefix}-spacing-inset-xxl: cssToken.var(--spacing-inset-xxl); - --#{$prefix}-spacing-inset-xl: cssToken.var(--spacing-inset-xl); - --#{$prefix}-spacing-inset-l: cssToken.var(--spacing-inset-l); - --#{$prefix}-spacing-inset-m: cssToken.var(--spacing-inset-m); - --#{$prefix}-spacing-inset-s: cssToken.var(--spacing-inset-s); - --#{$prefix}-spacing-inset-xs: cssToken.var(--spacing-inset-xs); - --#{$prefix}-spacing-inline-l: cssToken.var(--spacing-inline-l); - --#{$prefix}-spacing-inline-m: cssToken.var(--spacing-inline-m); - --#{$prefix}-spacing-inline-s: cssToken.var(--spacing-inline-s); - --#{$prefix}-spacing-inline-xs: cssToken.var(--spacing-inline-xs); - --#{$prefix}-spacing-inline-xxs: cssToken.var(--spacing-inline-xxs); - --#{$prefix}-spacing-stack-xxl: cssToken.var(--spacing-stack-xxl); - --#{$prefix}-spacing-stack-xl: cssToken.var(--spacing-stack-xl); - --#{$prefix}-spacing-stack-l: cssToken.var(--spacing-stack-l); - --#{$prefix}-spacing-stack-m: cssToken.var(--spacing-stack-m); - --#{$prefix}-spacing-stack-s: cssToken.var(--spacing-stack-s); - --#{$prefix}-spacing-stack-xs: cssToken.var(--spacing-stack-xs); + --bsi-spacing-inset-3xl: cssToken.var(--spacing-inset-3xl); + --bsi-spacing-inset-xxl: cssToken.var(--spacing-inset-xxl); + --bsi-spacing-inset-xl: cssToken.var(--spacing-inset-xl); + --bsi-spacing-inset-l: cssToken.var(--spacing-inset-l); + --bsi-spacing-inset-m: cssToken.var(--spacing-inset-m); + --bsi-spacing-inset-s: cssToken.var(--spacing-inset-s); + --bsi-spacing-inset-xs: cssToken.var(--spacing-inset-xs); + --bsi-spacing-inline-l: cssToken.var(--spacing-inline-l); + --bsi-spacing-inline-m: cssToken.var(--spacing-inline-m); + --bsi-spacing-inline-s: cssToken.var(--spacing-inline-s); + --bsi-spacing-inline-xs: cssToken.var(--spacing-inline-xs); + --bsi-spacing-inline-xxs: cssToken.var(--spacing-inline-xxs); + --bsi-spacing-stack-xxl: cssToken.var(--spacing-stack-xxl); + --bsi-spacing-stack-xl: cssToken.var(--spacing-stack-xl); + --bsi-spacing-stack-l: cssToken.var(--spacing-stack-l); + --bsi-spacing-stack-m: cssToken.var(--spacing-stack-m); + --bsi-spacing-stack-s: cssToken.var(--spacing-stack-s); + --bsi-spacing-stack-xs: cssToken.var(--spacing-stack-xs); // typography - --#{$prefix}-font-mono: cssToken.var(--font-mono); - --#{$prefix}-font-serif: cssToken.var(--font-serif); - --#{$prefix}-font-sans: cssToken.var(--font-sans); - --#{$prefix}-font-weight-bold: cssToken.var(--font-weight-bold); - --#{$prefix}-font-weight-semibold: cssToken.var(--font-weight-semibold); - --#{$prefix}-font-weight-regular: cssToken.var(--font-weight-regular); - --#{$prefix}-font-weight-light: cssToken.var(--font-weight-light); - --#{$prefix}-font-weight-extra-light: cssToken.var(--font-weight-extra-light); - --#{$prefix}-font-size-10: cssToken.var(--font-size-10); - --#{$prefix}-font-size-9: cssToken.var(--font-size-9); - --#{$prefix}-font-size-8: cssToken.var(--font-size-8); - --#{$prefix}-font-size-7: cssToken.var(--font-size-7); - --#{$prefix}-font-size-6: cssToken.var(--font-size-6); - --#{$prefix}-font-size-5: cssToken.var(--font-size-5); - --#{$prefix}-font-size-4: cssToken.var(--font-size-4); - --#{$prefix}-font-size-3: cssToken.var(--font-size-3); - --#{$prefix}-font-size-2: cssToken.var(--font-size-2); - --#{$prefix}-font-size-1: cssToken.var(--font-size-1); - --#{$prefix}-font-line-height-7: cssToken.var(--font-line-height-7); - --#{$prefix}-font-line-height-6: cssToken.var(--font-line-height-6); - --#{$prefix}-font-line-height-5: cssToken.var(--font-line-height-5); - --#{$prefix}-font-line-height-4: cssToken.var(--font-line-height-4); - --#{$prefix}-font-line-height-3: cssToken.var(--font-line-height-3); - --#{$prefix}-font-line-height-2: cssToken.var(--font-line-height-2); - --#{$prefix}-font-line-height-1: cssToken.var(--font-line-height-1); - --#{$prefix}-font-tracking-normal: cssToken.var(--font-tracking-normal); - --#{$prefix}-font-tracking-tight: cssToken.var(--font-tracking-tight); - --#{$prefix}-font-tracking-narrow: cssToken.var(--font-tracking-narrow); - --#{$prefix}-font-tracking-short: cssToken.var(--font-tracking-short); - --#{$prefix}-body-font-serif: cssToken.var(--body-font-serif); - --#{$prefix}-body-font-mono: cssToken.var(--body-font-mono); - --#{$prefix}-body-font-sans: cssToken.var(--body-font-sans); - --#{$prefix}-caption-font: cssToken.var(--caption-font); - --#{$prefix}-lead-line-height-l: cssToken.var(--lead-line-height-l); - --#{$prefix}-lead-line-height: cssToken.var(--lead-line-height); - --#{$prefix}-body-line-height-l: cssToken.var(--body-line-height-l); - --#{$prefix}-heading-6-line-height-l: cssToken.var(--heading-6-line-height-l); - --#{$prefix}-heading-5-line-height-l: cssToken.var(--heading-5-line-height-l); - --#{$prefix}-heading-4-line-height-l: cssToken.var(--heading-4-line-height-l); - --#{$prefix}-heading-3-line-height-l: cssToken.var(--heading-3-line-height-l); - --#{$prefix}-heading-2-line-height-l: cssToken.var(--heading-2-line-height-l); - --#{$prefix}-heading-1-line-height-l: cssToken.var(--heading-1-line-height-l); - --#{$prefix}-caption-line-height: cssToken.var(--caption-line-height); - --#{$prefix}-body-line-height: cssToken.var(--body-line-height); - --#{$prefix}-heading-6-line-height: cssToken.var(--heading-6-line-height); - --#{$prefix}-heading-5-line-height: cssToken.var(--heading-5-line-height); - --#{$prefix}-heading-4-line-height: cssToken.var(--heading-4-line-height); - --#{$prefix}-heading-3-line-height: cssToken.var(--heading-3-line-height); - --#{$prefix}-heading-2-line-height: cssToken.var(--heading-2-line-height); - --#{$prefix}-heading-1-line-height: cssToken.var(--heading-1-line-height); - --#{$prefix}-lead-font-size-l: cssToken.var(--lead-font-size-l); - --#{$prefix}-lead-font-size: cssToken.var(--lead-font-size); - --#{$prefix}-heading-6-font-size-l: cssToken.var(--heading-6-font-size-l); - --#{$prefix}-heading-5-font-size-l: cssToken.var(--heading-5-font-size-l); - --#{$prefix}-heading-4-font-size-l: cssToken.var(--heading-4-font-size-l); - --#{$prefix}-heading-3-font-size-l: cssToken.var(--heading-3-font-size-l); - --#{$prefix}-heading-2-font-size-l: cssToken.var(--heading-2-font-size-l); - --#{$prefix}-heading-1-font-size-l: cssToken.var(--heading-1-font-size-l); - --#{$prefix}-caption-font-size: cssToken.var(--caption-font-size); - --#{$prefix}-body-font-size-l: cssToken.var(--body-font-size-l); - --#{$prefix}-body-font-size: cssToken.var(--body-font-size); - --#{$prefix}-heading-6-font-size: cssToken.var(--heading-6-font-size); - --#{$prefix}-heading-5-font-size: cssToken.var(--heading-5-font-size); - --#{$prefix}-heading-4-font-size: cssToken.var(--heading-4-font-size); - --#{$prefix}-heading-3-font-size: cssToken.var(--heading-3-font-size); - --#{$prefix}-heading-2-font-size: cssToken.var(--heading-2-font-size); - --#{$prefix}-heading-1-font-size: cssToken.var(--heading-1-font-size); - --#{$prefix}-lead-font-weight: cssToken.var(--lead-font-weight); - --#{$prefix}-caption-font-weight-regular: cssToken.var(--caption-font-weight-regular); - --#{$prefix}-caption-font-weight-semibold: cssToken.var(--caption-font-weight-semibold); - --#{$prefix}-body-font-weight: cssToken.var(--body-font-weight); - --#{$prefix}-heading-6-font-weight: cssToken.var(--heading-6-font-weight); - --#{$prefix}-heading-5-font-weight: cssToken.var(--heading-5-font-weight); - --#{$prefix}-heading-4-font-weight: cssToken.var(--heading-4-font-weight); - --#{$prefix}-heading-3-font-weight: cssToken.var(--heading-3-font-weight); - --#{$prefix}-heading-2-font-weight: cssToken.var(--heading-2-font-weight); - --#{$prefix}-heading-1-font-weight: cssToken.var(--heading-1-font-weight); - --#{$prefix}-color-outline-focus: cssToken.var(--color-outline-focus); - --#{$prefix}-color-text-accent: cssToken.var(--color-text-accent); - --#{$prefix}-icon-size-xxl: cssToken.var(--icon-size-xxl); - --#{$prefix}-icon-size-xl: cssToken.var(--icon-size-xl); - --#{$prefix}-icon-size-l: cssToken.var(--icon-size-l); - --#{$prefix}-icon-size-m: cssToken.var(--icon-size-m); - --#{$prefix}-icon-size-s: cssToken.var(--icon-size-s); - --#{$prefix}-border-broad: cssToken.var(--border-broad); - --#{$prefix}-border-thick: cssToken.var(--border-thick); - --#{$prefix}-border-double: cssToken.var(--border-double); - --#{$prefix}-border-base: cssToken.var(--border-base); - --#{$prefix}-radius-rounded: cssToken.var(--radius-rounded); - --#{$prefix}-radius-circle: cssToken.var(--radius-circle); - --#{$prefix}-radius-smooth: cssToken.var(--radius-smooth); - --#{$prefix}-sizing-full: cssToken.var(--sizing-full); - --#{$prefix}-sizing-two-thirds: cssToken.var(--sizing-two-thirds); - --#{$prefix}-sizing-half: cssToken.var(--sizing-half); - --#{$prefix}-sizing-quarter: cssToken.var(--sizing-quarter); - --#{$prefix}-shadow-l-type: cssToken.var(--shadow-l-type); - --#{$prefix}-shadow-l-color: cssToken.var(--shadow-l-color); - --#{$prefix}-shadow-l-spread: cssToken.var(--shadow-l-spread); - --#{$prefix}-shadow-l-blur: cssToken.var(--shadow-l-blur); - --#{$prefix}-shadow-l-y: cssToken.var(--shadow-l-y); - --#{$prefix}-shadow-l-x: cssToken.var(--shadow-l-x); - --#{$prefix}-shadow-m-type: cssToken.var(--shadow-m-type); - --#{$prefix}-shadow-m-color: cssToken.var(--shadow-m-color); - --#{$prefix}-shadow-m-spread: cssToken.var(--shadow-m-spread); - --#{$prefix}-shadow-m-blur: cssToken.var(--shadow-m-blur); - --#{$prefix}-shadow-m-y: cssToken.var(--shadow-m-y); - --#{$prefix}-shadow-m-x: cssToken.var(--shadow-m-x); - --#{$prefix}-shadow-s-type: cssToken.var(--shadow-s-type); - --#{$prefix}-shadow-s-color: cssToken.var(--shadow-s-color); - --#{$prefix}-shadow-s-spread: cssToken.var(--shadow-s-spread); - --#{$prefix}-shadow-s-blur: cssToken.var(--shadow-s-blur); - --#{$prefix}-shadow-s-y: cssToken.var(--shadow-s-y); - --#{$prefix}-shadow-s-x: cssToken.var(--shadow-s-x); + --bsi-font-mono: cssToken.var(--font-mono); + --bsi-font-serif: cssToken.var(--font-serif); + --bsi-font-sans: cssToken.var(--font-sans); + --bsi-font-weight-bold: cssToken.var(--font-weight-bold); + --bsi-font-weight-semibold: cssToken.var(--font-weight-semibold); + --bsi-font-weight-regular: cssToken.var(--font-weight-regular); + --bsi-font-weight-light: cssToken.var(--font-weight-light); + --bsi-font-weight-extra-light: cssToken.var(--font-weight-extra-light); + --bsi-font-size-10: cssToken.var(--font-size-10); + --bsi-font-size-9: cssToken.var(--font-size-9); + --bsi-font-size-8: cssToken.var(--font-size-8); + --bsi-font-size-7: cssToken.var(--font-size-7); + --bsi-font-size-6: cssToken.var(--font-size-6); + --bsi-font-size-5: cssToken.var(--font-size-5); + --bsi-font-size-4: cssToken.var(--font-size-4); + --bsi-font-size-3: cssToken.var(--font-size-3); + --bsi-font-size-2: cssToken.var(--font-size-2); + --bsi-font-size-1: cssToken.var(--font-size-1); + --bsi-font-line-height-5: cssToken.var(--font-line-height-5); + --bsi-font-line-height-4: cssToken.var(--font-line-height-4); + --bsi-font-line-height-3: cssToken.var(--font-line-height-3); + --bsi-font-line-height-2: cssToken.var(--font-line-height-2); + --bsi-font-line-height-1: cssToken.var(--font-line-height-1); + --bsi-font-tracking-normal: cssToken.var(--font-tracking-normal); + --bsi-font-tracking-tight: cssToken.var(--font-tracking-tight); + --bsi-font-tracking-narrow: cssToken.var(--font-tracking-narrow); + --bsi-font-tracking-short: cssToken.var(--font-tracking-short); + // --bsi-lead-line-height-l: cssToken.var(--lead-line-height-l); + // --bsi-body-line-height-l: cssToken.var(--body-line-height-l); + // --bsi-heading-6-line-height-l: cssToken.var(--heading-6-line-height-l); + // --bsi-heading-5-line-height-l: cssToken.var(--heading-5-line-height-l); + // --bsi-heading-4-line-height-l: cssToken.var(--heading-4-line-height-l); + // --bsi-heading-3-line-height-l: cssToken.var(--heading-3-line-height-l); + // --bsi-heading-2-line-height-l: cssToken.var(--heading-2-line-height-l); + // --bsi-heading-1-line-height-l: cssToken.var(--heading-1-line-height-l); + // --bsi-heading-6-line-height: cssToken.var(--heading-6-line-height); + // --bsi-heading-5-line-height: cssToken.var(--heading-5-line-height); + // --bsi-heading-4-line-height: cssToken.var(--heading-4-line-height); + // --bsi-heading-3-line-height: cssToken.var(--heading-3-line-height); + // --bsi-heading-2-line-height: cssToken.var(--heading-2-line-height); + // --bsi-heading-1-line-height: cssToken.var(--heading-1-line-height); + + --bsi-heading-6-font-size: cssToken.var(--heading-6-font-size); + --bsi-heading-5-font-size: cssToken.var(--heading-5-font-size); + --bsi-heading-4-font-size: cssToken.var(--heading-4-font-size); + --bsi-heading-3-font-size: cssToken.var(--heading-3-font-size); + --bsi-heading-2-font-size: cssToken.var(--heading-2-font-size); + --bsi-heading-1-font-size: cssToken.var(--heading-1-font-size); + --bsi-heading-6-font-size-l: cssToken.var(--heading-6-font-size-l); + --bsi-heading-5-font-size-l: cssToken.var(--heading-5-font-size-l); + --bsi-heading-4-font-size-l: cssToken.var(--heading-4-font-size-l); + --bsi-heading-3-font-size-l: cssToken.var(--heading-3-font-size-l); + --bsi-heading-2-font-size-l: cssToken.var(--heading-2-font-size-l); + --bsi-heading-1-font-size-l: cssToken.var(--heading-1-font-size-l); + --bsi-heading-6-font-weight: cssToken.var(--heading-6-font-weight); + --bsi-heading-5-font-weight: cssToken.var(--heading-5-font-weight); + --bsi-heading-4-font-weight: cssToken.var(--heading-4-font-weight); + --bsi-heading-3-font-weight: cssToken.var(--heading-3-font-weight); + --bsi-heading-2-font-weight: cssToken.var(--heading-2-font-weight); + --bsi-heading-1-font-weight: cssToken.var(--heading-1-font-weight); + --bsi-body-font-size-l: cssToken.var(--body-font-size-l); + --bsi-body-font-size: cssToken.var(--body-font-size); + --bsi-body-line-height: cssToken.var(--body-line-height); + --bsi-body-font-weight: cssToken.var(--body-font-weight); + --bsi-lead-font-size-l: cssToken.var(--lead-font-size-l); + --bsi-lead-font-size: cssToken.var(--lead-font-size); + --bsi-lead-font-weight: cssToken.var(--lead-font-weight); + --bsi-lead-line-height: cssToken.var(--lead-line-height); + --bsi-caption-font-size: cssToken.var(--caption-font-size); + --bsi-caption-line-height: cssToken.var(--caption-line-height); + --bsi-caption-font-weight-regular: cssToken.var(--caption-font-weight-regular); + --bsi-caption-font-weight-semibold: cssToken.var(--caption-font-weight-semibold); + --bsi-icon-size-xxl: cssToken.var(--icon-size-xxl); + --bsi-icon-size-xl: cssToken.var(--icon-size-xl); + --bsi-icon-size-l: cssToken.var(--icon-size-l); + --bsi-icon-size-m: cssToken.var(--icon-size-m); + --bsi-icon-size-s: cssToken.var(--icon-size-s); + --bsi-border-broad: cssToken.var(--border-broad); + --bsi-border-thick: cssToken.var(--border-thick); + --bsi-border-double: cssToken.var(--border-double); + --bsi-border-base: cssToken.var(--border-base); + --bsi-radius-rounded: cssToken.var(--radius-rounded); + --bsi-radius-circle: cssToken.var(--radius-circle); + --bsi-radius-smooth: cssToken.var(--radius-smooth); + --bsi-sizing-full: cssToken.var(--sizing-full); + --bsi-sizing-two-thirds: cssToken.var(--sizing-two-thirds); + --bsi-sizing-half: cssToken.var(--sizing-half); + --bsi-sizing-quarter: cssToken.var(--sizing-quarter); + --bsi-shadow-l-type: cssToken.var(--shadow-l-type); + --bsi-shadow-l-color: cssToken.var(--shadow-l-color); + --bsi-shadow-l-spread: cssToken.var(--shadow-l-spread); + --bsi-shadow-l-blur: cssToken.var(--shadow-l-blur); + --bsi-shadow-l-y: cssToken.var(--shadow-l-y); + --bsi-shadow-l-x: cssToken.var(--shadow-l-x); + --bsi-shadow-m-type: cssToken.var(--shadow-m-type); + --bsi-shadow-m-color: cssToken.var(--shadow-m-color); + --bsi-shadow-m-spread: cssToken.var(--shadow-m-spread); + --bsi-shadow-m-blur: cssToken.var(--shadow-m-blur); + --bsi-shadow-m-y: cssToken.var(--shadow-m-y); + --bsi-shadow-m-x: cssToken.var(--shadow-m-x); + --bsi-shadow-s-type: cssToken.var(--shadow-s-type); + --bsi-shadow-s-color: cssToken.var(--shadow-s-color); + --bsi-shadow-s-spread: cssToken.var(--shadow-s-spread); + --bsi-shadow-s-blur: cssToken.var(--shadow-s-blur); + --bsi-shadow-s-y: cssToken.var(--shadow-s-y); + --bsi-shadow-s-x: cssToken.var(--shadow-s-x); // colors - --#{$prefix}-color-text-inverse: cssToken.var(--color-text-inverse); - --#{$prefix}-color-text-error-active: cssToken.var(--color-text-error-active); - --#{$prefix}-color-text-error-hover: cssToken.var(--color-text-error-hover); - --#{$prefix}-color-text-error: cssToken.var(--color-text-error); - --#{$prefix}-color-text-warning-active: cssToken.var(--color-text-warning-active); - --#{$prefix}-color-text-warning-hover: cssToken.var(--color-text-warning-hover); - --#{$prefix}-color-text-warning: cssToken.var(--color-text-warning); - --#{$prefix}-color-text-success-active: cssToken.var(--color-text-success-active); - --#{$prefix}-color-text-success-hover: cssToken.var(--color-text-success-hover); - --#{$prefix}-color-text-success: cssToken.var(--color-text-success); - --#{$prefix}-color-text-disabled: cssToken.var(--color-text-disabled); - --#{$prefix}-color-text-muted: cssToken.var(--color-text-muted); - --#{$prefix}-color-text-secondary-active: cssToken.var(--color-text-secondary-active); - --#{$prefix}-color-text-secondary-hover: cssToken.var(--color-text-secondary-hover); - --#{$prefix}-color-text-secondary: cssToken.var(--color-text-secondary); - --#{$prefix}-color-text-primary-active: cssToken.var(--color-text-primary-active); - --#{$prefix}-color-text-primary-hover: cssToken.var(--color-text-primary-hover); - --#{$prefix}-color-text-primary: cssToken.var(--color-text-primary); - --#{$prefix}-color-text-base: cssToken.var(--color-text-base); - --#{$prefix}-color-border-error-active: cssToken.var(--color-border-error-active); - --#{$prefix}-color-border-error-hover: cssToken.var(--color-border-error-hover); - --#{$prefix}-color-border-error: cssToken.var(--color-border-error); - --#{$prefix}-color-border-warning-active: cssToken.var(--color-border-warning-active); - --#{$prefix}-color-border-warning-hover: cssToken.var(--color-border-warning-hover); - --#{$prefix}-color-border-warning: cssToken.var(--color-border-warning); - --#{$prefix}-color-border-success-active: cssToken.var(--color-border-success-active); - --#{$prefix}-color-border-success-hover: cssToken.var(--color-border-success-hover); - --#{$prefix}-color-border-success: cssToken.var(--color-border-success); - --#{$prefix}-color-border-subtle: cssToken.var(--color-border-subtle); - --#{$prefix}-color-border-disabled: cssToken.var(--color-border-disabled); - --#{$prefix}-color-border-inverse: cssToken.var(--color-border-inverse); - --#{$prefix}-color-border-secondary-active: cssToken.var(--color-border-secondary-active); - --#{$prefix}-color-border-secondary-hover: cssToken.var(--color-border-secondary-hover); - --#{$prefix}-color-border-secondary: cssToken.var(--color-border-secondary); - --#{$prefix}-color-border-primary-active: cssToken.var(--color-border-primary-active); - --#{$prefix}-color-border-primary-hover: cssToken.var(--color-border-primary-hover); - --#{$prefix}-color-border-primary: cssToken.var(--color-border-primary); - --#{$prefix}-color-background-primary-dark: cssToken.var(--color-background-primary-dark); - --#{$prefix}-color-background-primary-muted: cssToken.var(--color-background-primary-muted); - --#{$prefix}-color-background-error-active: cssToken.var(--color-background-error-active); - --#{$prefix}-color-background-error-hover: cssToken.var(--color-background-error-hover); - --#{$prefix}-color-background-error-light: cssToken.var(--color-background-error-light); - --#{$prefix}-color-background-error: cssToken.var(--color-background-error); - --#{$prefix}-color-background-warning-active: cssToken.var(--color-background-warning-active); - --#{$prefix}-color-background-warning-hover: cssToken.var(--color-background-warning-hover); - --#{$prefix}-color-background-warning-light: cssToken.var(--color-background-warning-light); - --#{$prefix}-color-background-warning: cssToken.var(--color-background-warning); - --#{$prefix}-color-background-success-active: cssToken.var(--color-background-success-active); - --#{$prefix}-color-background-success-hover: cssToken.var(--color-background-success-hover); - --#{$prefix}-color-background-success-light: cssToken.var(--color-background-success-light); - --#{$prefix}-color-background-success: cssToken.var(--color-background-success); - --#{$prefix}-color-background-emphasis: cssToken.var(--color-background-emphasis); - --#{$prefix}-color-background-subtle: cssToken.var(--color-background-subtle); - --#{$prefix}-color-background-disabled: cssToken.var(--color-background-disabled); - --#{$prefix}-color-background-inverse: cssToken.var(--color-background-inverse); - --#{$prefix}-color-background-muted: cssToken.var(--color-background-muted); - --#{$prefix}-color-background-accent-hover: cssToken.var(--color-background-accent-hover); - --#{$prefix}-color-background-accent: cssToken.var(--color-background-accent); - --#{$prefix}-color-background-secondary-lighter: cssToken.var(--color-background-secondary-lighter); - --#{$prefix}-color-background-secondary-light: cssToken.var(--color-background-secondary-light); - --#{$prefix}-color-background-secondary-active: cssToken.var(--color-background-secondary-active); - --#{$prefix}-color-background-secondary-hover: cssToken.var(--color-background-secondary-hover); - --#{$prefix}-color-background-secondary: cssToken.var(--color-background-secondary); - --#{$prefix}-color-background-primary-active: cssToken.var(--color-background-primary-active); - --#{$prefix}-color-background-primary-hover: cssToken.var(--color-background-primary-hover); - --#{$prefix}-color-background-primary-lighter: cssToken.var(--color-background-primary-lighter); - --#{$prefix}-color-background-primary-light: cssToken.var(--color-background-primary-light); - --#{$prefix}-color-background-primary: cssToken.var(--color-background-primary); - --#{$prefix}-icon-inverse: cssToken.var(--icon-inverse); + --bsi-color-text-accent: cssToken.var(--color-text-accent); + --bsi-color-text-inverse: cssToken.var(--color-text-inverse); + --bsi-color-text-error-active: cssToken.var(--color-text-error-active); + --bsi-color-text-error-hover: cssToken.var(--color-text-error-hover); + --bsi-color-text-error: cssToken.var(--color-text-error); + --bsi-color-text-warning-active: cssToken.var(--color-text-warning-active); + --bsi-color-text-warning-hover: cssToken.var(--color-text-warning-hover); + --bsi-color-text-warning: cssToken.var(--color-text-warning); + --bsi-color-text-success-active: cssToken.var(--color-text-success-active); + --bsi-color-text-success-hover: cssToken.var(--color-text-success-hover); + --bsi-color-text-success: cssToken.var(--color-text-success); + --bsi-color-text-disabled: cssToken.var(--color-text-disabled); + --bsi-color-text-muted: cssToken.var(--color-text-muted); + --bsi-color-text-secondary-active: cssToken.var(--color-text-secondary-active); + --bsi-color-text-secondary-hover: cssToken.var(--color-text-secondary-hover); + --bsi-color-text-secondary: cssToken.var(--color-text-secondary); + --bsi-color-text-primary-active: cssToken.var(--color-text-primary-active); + --bsi-color-text-primary-hover: cssToken.var(--color-text-primary-hover); + --bsi-color-text-primary: cssToken.var(--color-text-primary); + --bsi-color-text-base: cssToken.var(--color-text-base); + --bsi-color-border-error-active: cssToken.var(--color-border-error-active); + --bsi-color-border-error-hover: cssToken.var(--color-border-error-hover); + --bsi-color-border-error: cssToken.var(--color-border-error); + --bsi-color-border-warning-active: cssToken.var(--color-border-warning-active); + --bsi-color-border-warning-hover: cssToken.var(--color-border-warning-hover); + --bsi-color-border-warning: cssToken.var(--color-border-warning); + --bsi-color-border-success-active: cssToken.var(--color-border-success-active); + --bsi-color-border-success-hover: cssToken.var(--color-border-success-hover); + --bsi-color-border-success: cssToken.var(--color-border-success); + --bsi-color-border-subtle: cssToken.var(--color-border-subtle); + --bsi-color-border-disabled: cssToken.var(--color-border-disabled); + --bsi-color-border-inverse: cssToken.var(--color-border-inverse); + --bsi-color-border-secondary-active: cssToken.var(--color-border-secondary-active); + --bsi-color-border-secondary-hover: cssToken.var(--color-border-secondary-hover); + --bsi-color-border-secondary: cssToken.var(--color-border-secondary); + --bsi-color-border-primary-active: cssToken.var(--color-border-primary-active); + --bsi-color-border-primary-hover: cssToken.var(--color-border-primary-hover); + --bsi-color-border-primary: cssToken.var(--color-border-primary); + --bsi-color-background-primary-dark: cssToken.var(--color-background-primary-dark); + --bsi-color-background-primary-muted: cssToken.var(--color-background-primary-muted); + --bsi-color-background-error-active: cssToken.var(--color-background-error-active); + --bsi-color-background-error-hover: cssToken.var(--color-background-error-hover); + --bsi-color-background-error-light: cssToken.var(--color-background-error-light); + --bsi-color-background-error: cssToken.var(--color-background-error); + --bsi-color-background-warning-active: cssToken.var(--color-background-warning-active); + --bsi-color-background-warning-hover: cssToken.var(--color-background-warning-hover); + --bsi-color-background-warning-light: cssToken.var(--color-background-warning-light); + --bsi-color-background-warning: cssToken.var(--color-background-warning); + --bsi-color-background-success-active: cssToken.var(--color-background-success-active); + --bsi-color-background-success-hover: cssToken.var(--color-background-success-hover); + --bsi-color-background-success-light: cssToken.var(--color-background-success-light); + --bsi-color-background-success: cssToken.var(--color-background-success); + --bsi-color-background-emphasis: cssToken.var(--color-background-emphasis); + --bsi-color-background-subtle: cssToken.var(--color-background-subtle); + --bsi-color-background-disabled: cssToken.var(--color-background-disabled); + --bsi-color-background-inverse: cssToken.var(--color-background-inverse); + --bsi-color-background-muted: cssToken.var(--color-background-muted); + --bsi-color-background-accent-hover: cssToken.var(--color-background-accent-hover); + --bsi-color-background-accent: cssToken.var(--color-background-accent); + --bsi-color-background-secondary-lighter: cssToken.var(--color-background-secondary-lighter); + --bsi-color-background-secondary-light: cssToken.var(--color-background-secondary-light); + --bsi-color-background-secondary-active: cssToken.var(--color-background-secondary-active); + --bsi-color-background-secondary-hover: cssToken.var(--color-background-secondary-hover); + --bsi-color-background-secondary: cssToken.var(--color-background-secondary); + --bsi-color-background-primary-active: cssToken.var(--color-background-primary-active); + --bsi-color-background-primary-hover: cssToken.var(--color-background-primary-hover); + --bsi-color-background-primary-lighter: cssToken.var(--color-background-primary-lighter); + --bsi-color-background-primary-light: cssToken.var(--color-background-primary-light); + --bsi-color-background-primary: cssToken.var(--color-background-primary); + --bsi-color-outline-focus: cssToken.var(--color-outline-focus); // icons - --#{$prefix}-icon-error-active: cssToken.var(--icon-error-active); - --#{$prefix}-icon-error-hover: cssToken.var(--icon-error-hover); - --#{$prefix}-icon-error: cssToken.var(--icon-error); - --#{$prefix}-icon-warning-active: cssToken.var(--icon-warning-active); - --#{$prefix}-icon-warning-hover: cssToken.var(--icon-warning-hover); - --#{$prefix}-icon-warning: cssToken.var(--icon-warning); - --#{$prefix}-icon-success-active: cssToken.var(--icon-success-active); - --#{$prefix}-icon-success-hover: cssToken.var(--icon-success-hover); - --#{$prefix}-icon-success: cssToken.var(--icon-success); - --#{$prefix}-icon-secondary-active: cssToken.var(--icon-secondary-active); - --#{$prefix}-icon-secondary-hover: cssToken.var(--icon-secondary-hover); - --#{$prefix}-icon-secondary: cssToken.var(--icon-secondary); - --#{$prefix}-icon-primary-active: cssToken.var(--icon-primary-active); - --#{$prefix}-icon-primary-hover: cssToken.var(--icon-primary-hover); - --#{$prefix}-icon-primary: cssToken.var(--icon-primary); - --#{$prefix}-icon-default: cssToken.var(--icon-default); + --bsi-icon-error-active: cssToken.var(--icon-error-active); + --bsi-icon-error-hover: cssToken.var(--icon-error-hover); + --bsi-icon-error: cssToken.var(--icon-error); + --bsi-icon-warning-active: cssToken.var(--icon-warning-active); + --bsi-icon-warning-hover: cssToken.var(--icon-warning-hover); + --bsi-icon-warning: cssToken.var(--icon-warning); + --bsi-icon-success-active: cssToken.var(--icon-success-active); + --bsi-icon-success-hover: cssToken.var(--icon-success-hover); + --bsi-icon-success: cssToken.var(--icon-success); + --bsi-icon-secondary-active: cssToken.var(--icon-secondary-active); + --bsi-icon-inverse: cssToken.var(--icon-inverse); + --bsi-icon-secondary-hover: cssToken.var(--icon-secondary-hover); + --bsi-icon-secondary: cssToken.var(--icon-secondary); + --bsi-icon-primary-active: cssToken.var(--icon-primary-active); + --bsi-icon-primary-hover: cssToken.var(--icon-primary-hover); + --bsi-icon-primary: cssToken.var(--icon-primary); + --bsi-icon-default: cssToken.var(--icon-default); } diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss index 3b3ec2c2b..de0de7d14 100644 --- a/src/scss/base/_variables.scss +++ b/src/scss/base/_variables.scss @@ -1,8 +1,3 @@ -// SETTING PREFIX -// Use $prefix variable to set a custom prefix for the CSS variables. -// This is useful when you want to scope the library to a specific theme name. -// If you set $prefix: 'my-theme-', the primary color variable will be --my-theme-primary. -$prefix: 'bsi-' !default; // Color system ============================================================== @@ -16,8 +11,8 @@ $prefix: 'bsi-' !default; $min-contrast-ratio: 4.5 !default; // Customize the light and dark text colors for use in our color contrast function. -$color-contrast-dark: sassToken.$color-black !default; -$color-contrast-light: sassToken.$color-white !default; +$color-contrast-dark: cssToken.var(--color-black) !default; +$color-contrast-light: cssToken.var(--color-white) !default; $yiq-text-light: sassToken.$color-text-inverse !default; $yiq-text-dark: sassToken.$color-text-base !default; @@ -31,7 +26,7 @@ $yiq-text-dark: sassToken.$color-text-base !default; // $gray-border-disabled: $gray-disabled !default; // color-border-disabled // Border Color -$border-color: $gray-border !default; +// $border-color: $gray-border !default; // Replaced with --#{$prefix}-color-border // Info Colors $success: $green-accessible !default; @@ -58,8 +53,6 @@ $lightgrey-b4: #f2f6fa; $lightgrey-c1: #f7f9fa; $lightgrey-c2: hsl(210, 62%, 97%); // color-background-primary-lighter; - - // SEMANTIC TOKENS ========================================================= // Backgrounds @@ -143,7 +136,7 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default; // scss-docs-end box-shadow-variables $component-active-color: $white !default; -$component-active-bg: $primary !default; +$component-active-bg: var(--#{$prefix}-primary) !default; $caret-width: 0.3em !default; $caret-vertical-align: $caret-width * 0.85 !default; @@ -196,7 +189,7 @@ $border-widths: ( ) !default; $border-style: solid !default; -$border-color-translucent: rgba($black, 0.175) !default; +var(--#{$prefix}-color-border) !default-translucent: rgba($black, 0.175) !default; // Typography @@ -362,7 +355,7 @@ $focus-outline-color-out: $black !default; $focus-outline-color: $focus-outline-color-out !default; // xxx retro-compatibility, ex $orange //skiplinks -$skiplinks-color: $primary !default; +$skiplinks-color: var(--#{$prefix}-primary) !default; $skiplinks-bg: $color-background-primary-lighter !default; // Input @@ -785,7 +778,7 @@ $progress-font-size: $font-size-base * 0.75 !default; $progress-bg: $gray-200 !default; $progress-box-shadow: $box-shadow-inset !default; $progress-bar-color: $white !default; -$progress-bar-bg: $primary !default; +$progress-bar-bg: var(--#{$prefix}-primary) !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width 0.6s ease !default; @@ -808,9 +801,9 @@ $zindex-toast: 1090 !default; // scss-docs-end zindex-stack // Link and button colors -$btn-primary-bg: $primary !default; -$btn-primary-border: $primary !default; -$link-color: $primary !default; +$btn-primary-bg: var(--#{$prefix}-primary) !default; +$btn-primary-border: var(--#{$prefix}-primary) !default; +$link-color: var(--#{$prefix}-primary) !default; $link-shade-percentage: 20% !default; $link-hover-color: shift-color($link-color, $link-shade-percentage) !default; $link-hover-decoration: null !default; @@ -1103,7 +1096,7 @@ $list-group-active-border-color: $list-group-active-bg !default; $list-group-disabled-color: $gray-600 !default; $list-group-disabled-bg: $list-group-bg !default; -$list-group-action-color: $primary !default; +$list-group-action-color: var(--#{$prefix}-primary) !default; $list-group-action-hover-color: $list-group-action-color !default; $list-group-action-active-color: $body-color !default; @@ -1176,7 +1169,7 @@ $dropdown-link-active-bg: $component-active-bg !default; // Dropdown custom $dropdown-custom-button-padding: 0 4px; -$dropdown-custom-button-color: $primary !default; +$dropdown-custom-button-color: var(--#{$prefix}-primary) !default; $dropdown-custom-button-background: transparent !default; $dropdown-custom-button-caret-font-size: 0.5rem; $dropdown-custom-button-caret-distance: $v-gap; @@ -1232,7 +1225,7 @@ $nav-pills-link-active-bg: $component-active-bg !default; //Navigation -$navbar-bg-color: $primary !default; +$navbar-bg-color: var(--#{$prefix}-primary) !default; $navbar-brand-font-size: 1rem !default; $navbar-toggler-border-radius: 0 !default; $navbar-dark-toggler-icon-bg: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkuMnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMiAxMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSIxMDI0dXAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSItLWhvbWUtLS1wYXJhbGxheC0tLW1vYmlsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI0LjAwMDAwMCwgLTIwLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0iLW5ldHdvcmstc2xpbS1oZWFkZXIiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTI0LDI0IEwzNiwyNCBMMzYsMjYgTDI0LDI2IEwyNCwyNCBaIE0yNCwyMCBMMzIsMjAgTDMyLDIyIEwyNCwyMiBMMjQsMjAgWiBNMjQsMjggTDMyLDI4IEwzMiwzMCBMMjQsMzAgTDI0LDI4IFoiIGlkPSJpY29uLXNtYWxsLWJ1cmdlciI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=') !default; @@ -1274,20 +1267,20 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; // scss-docs-end navbar-dark-variables $navigation-bg-color: $white !default; -$navigation-bg-color-desktop: $primary !default; +$navigation-bg-color-desktop: var(--#{$prefix}-primary) !default; $navigation-h-padding: 24px; $navigation-v-padding: 13px; $navigation-sidebar-bg-color-mobile: rgba(0, 0, 0, 0.6) !default; $navigation-close-button-size: 44px !default; -$navigation-close-button-text-color: $primary !default; +$navigation-close-button-text-color: var(--#{$prefix}-primary) !default; $navigation-close-button-text-size: 0.75rem; $navigation-close-button-icon-size: 2rem; $navigation-links-margin-top: 102px; -$navigation-link-color: $primary !default; +$navigation-link-color: var(--#{$prefix}-primary) !default; $navigation-link-color-desk: $white !default; $navigation-link-active-bar-size: 3px; -$navigation-link-active-bar-color: $primary !default; +$navigation-link-active-bar-color: var(--#{$prefix}-primary) !default; $navigation-link-active-bar-color-desk: $white !default; $navigation-toggle-button-icon-color: $white !default; $navigation-toggle-button-icon-size: 1.5rem; @@ -1299,14 +1292,14 @@ $navigation-disabled-item-mobile-opacity: 0.6 !default; $navigation-hamburger-size: 24px; // navigation dark theme (mobile) -$navigation-dark-bg-color: $primary !default; // missing in UI kit +$navigation-dark-bg-color: var(--#{$prefix}-primary) !default; // missing in UI kit $navigation-dark-text-color: $white !default; // missing in UI kit $navigation-dark-bg-color: $primary-b1 !default; // missing in UI kit $navigation-dark-separator-color: $primary-c5 !default; // missing in UI kit // navigation light theme (desktop) $navigation-light-bg-color: $white !default; -$navigation-light-text-color: $primary !default; +$navigation-light-text-color: var(--#{$prefix}-primary) !default; $navigation-light-separator-color: $neutral-1-a2 !default; $navigation-light-megamenu-separator-color: $gray-border !default; // UI kit @@ -1357,13 +1350,13 @@ $pager-item-size-mobile: 2.5rem; // 40px $pager-item-size-tablet: 3rem; // 48px $pager-item-border-radius: 4px; $pager-item-margin-right: 5px; -$pager-item-current-color: $primary !default; -$pager-item-current-border: 1px solid $primary !default; +$pager-item-current-color: var(--#{$prefix}-primary) !default; +$pager-item-current-border: 1px solid var(--#{$prefix}-primary) !default; $pager-font-size: 1rem; $pager-font-weight: 700; $pager-font-color: $secondary !default; -$pager-hover-color: $primary !default; -$pager-icon-color: $primary !default; +$pager-hover-color: var(--#{$prefix}-primary) !default; +$pager-icon-color: var(--#{$prefix}-primary) !default; $pager-icon-size: 1rem; $pager-disabled-color: $gray-label-disabled !default; $pager-jump-to-width: 4.5rem; @@ -1383,7 +1376,7 @@ $sidebar-link-small-line-width: 65px; $sidebar-link-size: 1rem; $sidebar-dropdown-icon-size: 1.5rem; $sidebar-dropdown-line-selection-width: 2px; -$sidebar-dropdown-line-selection-color: $primary !default; +$sidebar-dropdown-line-selection-color: var(--#{$prefix}-primary) !default; $sidebar-submenu-font-size: 1rem; $sidebar-submenu-link-v-padding: 0.45em; $sidebar-border-color: $gray-border !default; @@ -1395,7 +1388,7 @@ $sidebar-dark-separator-color: rgba(229, 229, 229, 0.3) !default; // Missing in // Navscroll $navscroll-bg-color: $white !default; -$navscroll-toggler-color: $primary !default; +$navscroll-toggler-color: var(--#{$prefix}-primary) !default; $navscroll-button-text-weight: 600; $navscroll-top-box-shadow: 0 0px 30px 5px rgba(0, 0, 0, 0.05) !default; $navscroll-bottom-box-shadow: 0 0px 30px 5px rgba(0, 0, 0, 0.05) !default; @@ -1421,7 +1414,7 @@ $modal-padding: $v-gap * 3; $modal-margin: $v-gap * 6; $modal-padding-close: $v-gap * 2; $modal-heading-color: $color-text-base !default; // UI kit -$modal-icon-color: $primary !default; +$modal-icon-color: var(--#{$prefix}-primary) !default; $modal-icon-distance: $v-gap * 2; $modal-alert-p-distance: 32px + $v-gap * 2; $modal-heading-border: 1px solid $color-border-subtle !default; @@ -1453,12 +1446,12 @@ $header-slim-h-padding: 18px; $header-slim-v-padding-mob: 6.5px; // Header Slim theme light $header-slim-theme-light-bg-color: $white !default; -$header-slim-theme-light-text-color: $primary !default; -$header-slim-theme-light-button-color: $primary !default; -$header-slim-theme-light-button-hover-color: $primary !default; +$header-slim-theme-light-text-color: var(--#{$prefix}-primary) !default; +$header-slim-theme-light-button-color: var(--#{$prefix}-primary) !default; +$header-slim-theme-light-button-hover-color: var(--#{$prefix}-primary) !default; // Header Center -$header-center-bg-color: $primary !default; +$header-center-bg-color: var(--#{$prefix}-primary) !default; $header-center-text-color: $white !default; $header-center-max-height: 120px; $header-center-max-height-mob: 80px; @@ -1488,7 +1481,7 @@ $header-center-small-h2-size: 1.25rem; $header-center-small-h3-size: 0.75rem; // Header Center theme light $header-center-theme-light-bg-color: $white !default; -$header-center-theme-light-text-color: $primary !default; +$header-center-theme-light-text-color: var(--#{$prefix}-primary) !default; // Anchors vertical offset: $anchor-v-offset-lg: 72px; @@ -1515,7 +1508,7 @@ $card-category-m-bottom: $v-gap * 2; $card-big-head-size: 1.5rem; $card-big-head-l-h: 1.75rem; $card-signature-size: 0.875rem; -$card-link-color: $primary !default; +$card-link-color: var(--#{$prefix}-primary) !default; $card-link-icon-size: $v-gap * 2; $card-cat-icon-block-margin: $v-gap * 2; $card-cat-icon-size: $v-gap * 5; @@ -1531,7 +1524,7 @@ $card-img-heading-size: 1.1111111111111112rem; // FIXME $card-img-heading-l-h: 1.5555555555555556rem; $special-card-img-width: 174px; // flag icon -$flag-icon-color: $primary !default; +$flag-icon-color: var(--#{$prefix}-primary) !default; $flag-icon-h: $v-gap * 6; $flag-icon-w: $v-gap * 4; // tag @@ -1546,7 +1539,7 @@ $select-button-padding: $v-gap !default; $select-button-text-size: 1rem; $select-dd-shadow: $dialog-shadow !default; $select-dd-text-size: 1rem; -$select-dd-link-color: $primary !default; +$select-dd-link-color: var(--#{$prefix}-primary) !default; $select-dd-link-color-active: $color-text-primary-active !default; // UI kit $select-dd-small-separator-width: 65px; $select-dd-small-separator-bg: $gray-border !default; // UI kit @@ -1570,7 +1563,7 @@ $dp-grid-size: 0.75rem; $dp-current-size: $v-gap * 4; //hero -$hero-bg-color: $primary !default; +$hero-bg-color: var(--#{$prefix}-primary) !default; $hero-height-desk: 620px; $hero-height-mob: 380px; $hero-height-sm-desk: 400px; From f81a3e393bd354d5891a9c14f3329f8a15102946 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 2 Jan 2025 11:55:03 +0100 Subject: [PATCH 07/59] refactor: change tokens import --- package-lock.json | 8 +- src/scss/base/_root.scss | 463 ++++++++++++++++++++++----------- src/scss/base/_variables.scss | 87 ++++++- src/scss/bootstrap-italia.scss | 5 +- 4 files changed, 395 insertions(+), 168 deletions(-) diff --git a/package-lock.json b/package-lock.json index dea7aa8ec..60ce5ac13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "@octokit/rest": "^18.12.0", "@rollup/plugin-babel": "^6.0.4", "@rollup/plugin-legacy": "^3.0.2", - "@rollup/plugin-node-resolve": "^15.3.0", + "@rollup/plugin-node-resolve": "^15.3.1", "@rollup/plugin-terser": "^0.4.4", "browser-sync": "^3.0.2", "browserslist-config-design-italia": "^1.1.0", @@ -2765,9 +2765,9 @@ } }, "node_modules/@rollup/plugin-node-resolve": { - "version": "15.3.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.0.tgz", - "integrity": "sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==", + "version": "15.3.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz", + "integrity": "sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss index d8a1ee0a2..f63c6409e 100644 --- a/src/scss/base/_root.scss +++ b/src/scss/base/_root.scss @@ -1,3 +1,5 @@ +@import '../../../node_modules/design-tokens-italia/css/_variables.css'; + :root { // theme colors // 1. theme primary colors are used for primary buttons, links, and more. @@ -71,157 +73,314 @@ // --bsi-heading-2-line-height: cssToken.var(--heading-2-line-height); // --bsi-heading-1-line-height: cssToken.var(--heading-1-line-height); - --bsi-heading-6-font-size: cssToken.var(--heading-6-font-size); - --bsi-heading-5-font-size: cssToken.var(--heading-5-font-size); - --bsi-heading-4-font-size: cssToken.var(--heading-4-font-size); - --bsi-heading-3-font-size: cssToken.var(--heading-3-font-size); - --bsi-heading-2-font-size: cssToken.var(--heading-2-font-size); - --bsi-heading-1-font-size: cssToken.var(--heading-1-font-size); - --bsi-heading-6-font-size-l: cssToken.var(--heading-6-font-size-l); - --bsi-heading-5-font-size-l: cssToken.var(--heading-5-font-size-l); - --bsi-heading-4-font-size-l: cssToken.var(--heading-4-font-size-l); - --bsi-heading-3-font-size-l: cssToken.var(--heading-3-font-size-l); - --bsi-heading-2-font-size-l: cssToken.var(--heading-2-font-size-l); - --bsi-heading-1-font-size-l: cssToken.var(--heading-1-font-size-l); - --bsi-heading-6-font-weight: cssToken.var(--heading-6-font-weight); - --bsi-heading-5-font-weight: cssToken.var(--heading-5-font-weight); - --bsi-heading-4-font-weight: cssToken.var(--heading-4-font-weight); - --bsi-heading-3-font-weight: cssToken.var(--heading-3-font-weight); - --bsi-heading-2-font-weight: cssToken.var(--heading-2-font-weight); - --bsi-heading-1-font-weight: cssToken.var(--heading-1-font-weight); - --bsi-body-font-size-l: cssToken.var(--body-font-size-l); - --bsi-body-font-size: cssToken.var(--body-font-size); - --bsi-body-line-height: cssToken.var(--body-line-height); - --bsi-body-font-weight: cssToken.var(--body-font-weight); - --bsi-lead-font-size-l: cssToken.var(--lead-font-size-l); - --bsi-lead-font-size: cssToken.var(--lead-font-size); - --bsi-lead-font-weight: cssToken.var(--lead-font-weight); - --bsi-lead-line-height: cssToken.var(--lead-line-height); - --bsi-caption-font-size: cssToken.var(--caption-font-size); - --bsi-caption-line-height: cssToken.var(--caption-line-height); - --bsi-caption-font-weight-regular: cssToken.var(--caption-font-weight-regular); - --bsi-caption-font-weight-semibold: cssToken.var(--caption-font-weight-semibold); - --bsi-icon-size-xxl: cssToken.var(--icon-size-xxl); - --bsi-icon-size-xl: cssToken.var(--icon-size-xl); - --bsi-icon-size-l: cssToken.var(--icon-size-l); - --bsi-icon-size-m: cssToken.var(--icon-size-m); - --bsi-icon-size-s: cssToken.var(--icon-size-s); - --bsi-border-broad: cssToken.var(--border-broad); - --bsi-border-thick: cssToken.var(--border-thick); - --bsi-border-double: cssToken.var(--border-double); - --bsi-border-base: cssToken.var(--border-base); - --bsi-radius-rounded: cssToken.var(--radius-rounded); - --bsi-radius-circle: cssToken.var(--radius-circle); - --bsi-radius-smooth: cssToken.var(--radius-smooth); - --bsi-sizing-full: cssToken.var(--sizing-full); - --bsi-sizing-two-thirds: cssToken.var(--sizing-two-thirds); - --bsi-sizing-half: cssToken.var(--sizing-half); - --bsi-sizing-quarter: cssToken.var(--sizing-quarter); - --bsi-shadow-l-type: cssToken.var(--shadow-l-type); - --bsi-shadow-l-color: cssToken.var(--shadow-l-color); - --bsi-shadow-l-spread: cssToken.var(--shadow-l-spread); - --bsi-shadow-l-blur: cssToken.var(--shadow-l-blur); - --bsi-shadow-l-y: cssToken.var(--shadow-l-y); - --bsi-shadow-l-x: cssToken.var(--shadow-l-x); - --bsi-shadow-m-type: cssToken.var(--shadow-m-type); - --bsi-shadow-m-color: cssToken.var(--shadow-m-color); - --bsi-shadow-m-spread: cssToken.var(--shadow-m-spread); - --bsi-shadow-m-blur: cssToken.var(--shadow-m-blur); - --bsi-shadow-m-y: cssToken.var(--shadow-m-y); - --bsi-shadow-m-x: cssToken.var(--shadow-m-x); - --bsi-shadow-s-type: cssToken.var(--shadow-s-type); - --bsi-shadow-s-color: cssToken.var(--shadow-s-color); - --bsi-shadow-s-spread: cssToken.var(--shadow-s-spread); - --bsi-shadow-s-blur: cssToken.var(--shadow-s-blur); - --bsi-shadow-s-y: cssToken.var(--shadow-s-y); - --bsi-shadow-s-x: cssToken.var(--shadow-s-x); - // colors - --bsi-color-text-accent: cssToken.var(--color-text-accent); - --bsi-color-text-inverse: cssToken.var(--color-text-inverse); - --bsi-color-text-error-active: cssToken.var(--color-text-error-active); - --bsi-color-text-error-hover: cssToken.var(--color-text-error-hover); - --bsi-color-text-error: cssToken.var(--color-text-error); - --bsi-color-text-warning-active: cssToken.var(--color-text-warning-active); - --bsi-color-text-warning-hover: cssToken.var(--color-text-warning-hover); - --bsi-color-text-warning: cssToken.var(--color-text-warning); - --bsi-color-text-success-active: cssToken.var(--color-text-success-active); - --bsi-color-text-success-hover: cssToken.var(--color-text-success-hover); - --bsi-color-text-success: cssToken.var(--color-text-success); - --bsi-color-text-disabled: cssToken.var(--color-text-disabled); - --bsi-color-text-muted: cssToken.var(--color-text-muted); - --bsi-color-text-secondary-active: cssToken.var(--color-text-secondary-active); - --bsi-color-text-secondary-hover: cssToken.var(--color-text-secondary-hover); - --bsi-color-text-secondary: cssToken.var(--color-text-secondary); - --bsi-color-text-primary-active: cssToken.var(--color-text-primary-active); - --bsi-color-text-primary-hover: cssToken.var(--color-text-primary-hover); - --bsi-color-text-primary: cssToken.var(--color-text-primary); - --bsi-color-text-base: cssToken.var(--color-text-base); - --bsi-color-border-error-active: cssToken.var(--color-border-error-active); - --bsi-color-border-error-hover: cssToken.var(--color-border-error-hover); - --bsi-color-border-error: cssToken.var(--color-border-error); - --bsi-color-border-warning-active: cssToken.var(--color-border-warning-active); - --bsi-color-border-warning-hover: cssToken.var(--color-border-warning-hover); - --bsi-color-border-warning: cssToken.var(--color-border-warning); - --bsi-color-border-success-active: cssToken.var(--color-border-success-active); - --bsi-color-border-success-hover: cssToken.var(--color-border-success-hover); - --bsi-color-border-success: cssToken.var(--color-border-success); - --bsi-color-border-subtle: cssToken.var(--color-border-subtle); - --bsi-color-border-disabled: cssToken.var(--color-border-disabled); - --bsi-color-border-inverse: cssToken.var(--color-border-inverse); - --bsi-color-border-secondary-active: cssToken.var(--color-border-secondary-active); - --bsi-color-border-secondary-hover: cssToken.var(--color-border-secondary-hover); - --bsi-color-border-secondary: cssToken.var(--color-border-secondary); - --bsi-color-border-primary-active: cssToken.var(--color-border-primary-active); - --bsi-color-border-primary-hover: cssToken.var(--color-border-primary-hover); - --bsi-color-border-primary: cssToken.var(--color-border-primary); - --bsi-color-background-primary-dark: cssToken.var(--color-background-primary-dark); - --bsi-color-background-primary-muted: cssToken.var(--color-background-primary-muted); - --bsi-color-background-error-active: cssToken.var(--color-background-error-active); - --bsi-color-background-error-hover: cssToken.var(--color-background-error-hover); - --bsi-color-background-error-light: cssToken.var(--color-background-error-light); - --bsi-color-background-error: cssToken.var(--color-background-error); - --bsi-color-background-warning-active: cssToken.var(--color-background-warning-active); - --bsi-color-background-warning-hover: cssToken.var(--color-background-warning-hover); - --bsi-color-background-warning-light: cssToken.var(--color-background-warning-light); - --bsi-color-background-warning: cssToken.var(--color-background-warning); - --bsi-color-background-success-active: cssToken.var(--color-background-success-active); - --bsi-color-background-success-hover: cssToken.var(--color-background-success-hover); - --bsi-color-background-success-light: cssToken.var(--color-background-success-light); - --bsi-color-background-success: cssToken.var(--color-background-success); - --bsi-color-background-emphasis: cssToken.var(--color-background-emphasis); - --bsi-color-background-subtle: cssToken.var(--color-background-subtle); - --bsi-color-background-disabled: cssToken.var(--color-background-disabled); - --bsi-color-background-inverse: cssToken.var(--color-background-inverse); - --bsi-color-background-muted: cssToken.var(--color-background-muted); - --bsi-color-background-accent-hover: cssToken.var(--color-background-accent-hover); - --bsi-color-background-accent: cssToken.var(--color-background-accent); - --bsi-color-background-secondary-lighter: cssToken.var(--color-background-secondary-lighter); - --bsi-color-background-secondary-light: cssToken.var(--color-background-secondary-light); - --bsi-color-background-secondary-active: cssToken.var(--color-background-secondary-active); - --bsi-color-background-secondary-hover: cssToken.var(--color-background-secondary-hover); - --bsi-color-background-secondary: cssToken.var(--color-background-secondary); - --bsi-color-background-primary-active: cssToken.var(--color-background-primary-active); - --bsi-color-background-primary-hover: cssToken.var(--color-background-primary-hover); - --bsi-color-background-primary-lighter: cssToken.var(--color-background-primary-lighter); - --bsi-color-background-primary-light: cssToken.var(--color-background-primary-light); - --bsi-color-background-primary: cssToken.var(--color-background-primary); - --bsi-color-outline-focus: cssToken.var(--color-outline-focus); + // Colors + // + // Generate palettes for full colors, grays, and theme colors. + + // @each $color, $value in $colors { + // --#{$prefix}#{$color}: #{$value}; + // } + + // @each $color, $value in $grays { + // --#{$prefix}gray-#{$color}: #{$value}; + // } + + // @each $color, $value in $theme-colors { + // --#{$prefix}#{$color}: #{$value}; + // } + + // @each $color, $value in $theme-colors-rgb { + // --#{$prefix}#{$color}-rgb: #{$value}; + // } + + // --#{$prefix}white-rgb: #{to-rgb($white)}; + // --#{$prefix}black-rgb: #{to-rgb($black)}; + // --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; + // --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; + + // Fonts + + // Note: Use `inspect` for lists so that quoted items keep the quotes. + // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 + // --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; + // --#{$prefix}font-monospace: #{inspect($font-family-monospace)}; + // --#{$prefix}gradient: #{$gradient}; + + // Root and body + // scss-docs-start root-body-variables + // @if $font-size-root != null { + // --#{$prefix}root-font-size: #{$font-size-root}; + // } + // --#{$prefix}body-font-family: #{$font-family-base}; + // @include rfs($font-size-base, --#{$prefix}body-font-size); + // --#{$prefix}body-font-weight: #{$font-weight-base}; + // --#{$prefix}body-line-height: #{$line-height-base}; + // --#{$prefix}body-color: #{$body-color}; + // @if $body-text-align != null { + // --#{$prefix}body-text-align: #{$body-text-align}; + // } + // --#{$prefix}body-bg: #{$body-bg}; + // scss-docs-end root-body-variables + + // scss-docs-start root-border-var + // --#{$prefix}border-width: #{$border-width}; + // --#{$prefix}border-style: #{$border-style}; + // --#{$prefix}border-color: #{$border-color}; + // --#{$prefix}border-color-translucent: #{$border-color-translucent}; + + // --#{$prefix}border-radius: #{$border-radius}; + // --#{$prefix}border-radius-sm: #{$border-radius-sm}; + // --#{$prefix}border-radius-lg: #{$border-radius-lg}; + // --#{$prefix}border-radius-xl: #{$border-radius-xl}; + // --#{$prefix}border-radius-2xl: #{$border-radius-2xl}; + // --#{$prefix}border-radius-pill: #{$border-radius-pill}; + // scss-docs-end root-border-var + + // --#{$prefix}link-color: #{$link-color}; + // --#{$prefix}link-hover-color: #{$link-hover-color}; + + // --#{$prefix}code-color: #{$code-color}; + + // --#{$prefix}highlight-bg: #{$mark-bg}; + + // ======================================================================= + // theme colors + // 1. theme primary colors are used for primary buttons, links, and more. + // 2. they reference the “theme italia“ palette in the design system .italia. + // 3. change the $prefix variable in "_variables.scss" to customize the theme name in the CSS custom properties. + // 4. customize these values to change the theme colors throughout your project. + // theme colors - customize those values to change the theme throughout your project. + --#{$prefix}theme-primary: var(--theme-italia-base); + --#{$prefix}theme-primary-muted: var(--theme-italia-muted); + --#{$prefix}theme-primary-dark: var(--theme-italia-dark); + --#{$prefix}theme-primary-light: var(--theme-italia-light); + --#{$prefix}theme-primary-lighter: var(--theme-italia-lighter); + // spacing + --#{$prefix}spacing-inset-3xl: var(--spacing-inset-3xl); + --#{$prefix}spacing-inset-xxl: var(--spacing-inset-xxl); + --#{$prefix}spacing-inset-xl: var(--spacing-inset-xl); + --#{$prefix}spacing-inset-l: var(--spacing-inset-l); + --#{$prefix}spacing-inset-m: var(--spacing-inset-m); + --#{$prefix}spacing-inset-s: var(--spacing-inset-s); + --#{$prefix}spacing-inset-xs: var(--spacing-inset-xs); + --#{$prefix}spacing-inline-l: var(--spacing-inline-l); + --#{$prefix}spacing-inline-m: var(--spacing-inline-m); + --#{$prefix}spacing-inline-s: var(--spacing-inline-s); + --#{$prefix}spacing-inline-xs: var(--spacing-inline-xs); + --#{$prefix}spacing-inline-xxs: var(--spacing-inline-xxs); + --#{$prefix}spacing-stack-xxl: var(--spacing-stack-xxl); + --#{$prefix}spacing-stack-xl: var(--spacing-stack-xl); + --#{$prefix}spacing-stack-l: var(--spacing-stack-l); + --#{$prefix}spacing-stack-m: var(--spacing-stack-m); + --#{$prefix}spacing-stack-s: var(--spacing-stack-s); + --#{$prefix}spacing-stack-xs: var(--spacing-stack-xs); + // typography + --#{$prefix}font-mono: var(--font-mono); + --#{$prefix}font-serif: var(--font-serif); + --#{$prefix}font-sans: var(--font-sans); + --#{$prefix}font-weight-bold: var(--font-weight-bold); + --#{$prefix}font-weight-semibold: var(--font-weight-semibold); + --#{$prefix}font-weight-regular: var(--font-weight-regular); + --#{$prefix}font-weight-light: var(--font-weight-light); + --#{$prefix}font-weight-extra-light: var(--font-weight-extra-light); + --#{$prefix}font-size-10: var(--font-size-10); + --#{$prefix}font-size-9: var(--font-size-9); + --#{$prefix}font-size-8: var(--font-size-8); + --#{$prefix}font-size-7: var(--font-size-7); + --#{$prefix}font-size-6: var(--font-size-6); + --#{$prefix}font-size-5: var(--font-size-5); + --#{$prefix}font-size-4: var(--font-size-4); + --#{$prefix}font-size-3: var(--font-size-3); + --#{$prefix}font-size-2: var(--font-size-2); + --#{$prefix}font-size-1: var(--font-size-1); + --#{$prefix}font-line-height-5: var(--font-line-height-5); + --#{$prefix}font-line-height-4: var(--font-line-height-4); + --#{$prefix}font-line-height-3: var(--font-line-height-3); + --#{$prefix}font-line-height-2: var(--font-line-height-2); + --#{$prefix}font-line-height-1: var(--font-line-height-1); + --#{$prefix}font-tracking-normal: var(--font-tracking-normal); + --#{$prefix}font-tracking-tight: var(--font-tracking-tight); + --#{$prefix}font-tracking-narrow: var(--font-tracking-narrow); + --#{$prefix}font-tracking-short: var(--font-tracking-short); + // --#{$prefix}lead-line-height-l: var(--lead-line-height-l); + // --#{$prefix}body-line-height-l: var(--body-line-height-l); + // --#{$prefix}heading-6-line-height-l: var(--heading-6-line-height-l); + // --#{$prefix}heading-5-line-height-l: var(--heading-5-line-height-l); + // --#{$prefix}heading-4-line-height-l: var(--heading-4-line-height-l); + // --#{$prefix}heading-3-line-height-l: var(--heading-3-line-height-l); + // --#{$prefix}heading-2-line-height-l: var(--heading-2-line-height-l); + // --#{$prefix}heading-1-line-height-l: var(--heading-1-line-height-l); + // --#{$prefix}heading-6-line-height: var(--heading-6-line-height); + // --#{$prefix}heading-5-line-height: var(--heading-5-line-height); + // --#{$prefix}heading-4-line-height: var(--heading-4-line-height); + // --#{$prefix}heading-3-line-height: var(--heading-3-line-height); + // --#{$prefix}heading-2-line-height: var(--heading-2-line-height); + // --#{$prefix}heading-1-line-height: var(--heading-1-line-height); + + --#{$prefix}heading-6-font-size: var(--heading-6-font-size); + --#{$prefix}heading-5-font-size: var(--heading-5-font-size); + --#{$prefix}heading-4-font-size: var(--heading-4-font-size); + --#{$prefix}heading-3-font-size: var(--heading-3-font-size); + --#{$prefix}heading-2-font-size: var(--heading-2-font-size); + --#{$prefix}heading-1-font-size: var(--heading-1-font-size); + --#{$prefix}heading-6-font-size-l: var(--heading-6-font-size-l); + --#{$prefix}heading-5-font-size-l: var(--heading-5-font-size-l); + --#{$prefix}heading-4-font-size-l: var(--heading-4-font-size-l); + --#{$prefix}heading-3-font-size-l: var(--heading-3-font-size-l); + --#{$prefix}heading-2-font-size-l: var(--heading-2-font-size-l); + --#{$prefix}heading-1-font-size-l: var(--heading-1-font-size-l); + --#{$prefix}heading-font-weight: var(--heading-font-weight); + --#{$prefix}heading-font-weight-weak: var(--heading-font-weight-weak); + --#{$prefix}body-font-size-l: var(--body-font-size-l); + --#{$prefix}body-font-size: var(--body-font-size); + --#{$prefix}body-line-height: var(--body-line-height); + --#{$prefix}body-font-weight: var(--body-font-weight); + --#{$prefix}lead-font-size-l: var(--lead-font-size-l); + --#{$prefix}lead-font-size: var(--lead-font-size); + --#{$prefix}lead-font-weight: var(--lead-font-weight); + --#{$prefix}lead-line-height: var(--lead-line-height); + --#{$prefix}caption-font-size: var(--caption-font-size); + --#{$prefix}caption-line-height: var(--caption-line-height); + --#{$prefix}caption-font-weight-regular: var(--caption-font-weight-regular); + --#{$prefix}caption-font-weight-semibold: var(--caption-font-weight-semibold); + --#{$prefix}icon-size-xxl: var(--icon-size-xxl); + --#{$prefix}icon-size-xl: var(--icon-size-xl); + --#{$prefix}icon-size-l: var(--icon-size-l); + --#{$prefix}icon-size-m: var(--icon-size-m); + --#{$prefix}icon-size-s: var(--icon-size-s); + --#{$prefix}border-broad: var(--border-broad); + --#{$prefix}border-thick: var(--border-thick); + --#{$prefix}border-double: var(--border-double); + --#{$prefix}border-base: var(--border-base); + --#{$prefix}radius-rounded: var(--radius-rounded); + --#{$prefix}radius-circle: var(--radius-circle); + --#{$prefix}radius-smooth: var(--radius-smooth); + --#{$prefix}sizing-full: var(--sizing-full); + --#{$prefix}sizing-two-thirds: var(--sizing-two-thirds); + --#{$prefix}sizing-half: var(--sizing-half); + --#{$prefix}sizing-quarter: var(--sizing-quarter); + --#{$prefix}shadow-l-type: var(--shadow-l-type); + --#{$prefix}shadow-l-color: var(--shadow-l-color); + --#{$prefix}shadow-l-spread: var(--shadow-l-spread); + --#{$prefix}shadow-l-blur: var(--shadow-l-blur); + --#{$prefix}shadow-l-y: var(--shadow-l-y); + --#{$prefix}shadow-l-x: var(--shadow-l-x); + --#{$prefix}shadow-m-type: var(--shadow-m-type); + --#{$prefix}shadow-m-color: var(--shadow-m-color); + --#{$prefix}shadow-m-spread: var(--shadow-m-spread); + --#{$prefix}shadow-m-blur: var(--shadow-m-blur); + --#{$prefix}shadow-m-y: var(--shadow-m-y); + --#{$prefix}shadow-m-x: var(--shadow-m-x); + --#{$prefix}shadow-s-type: var(--shadow-s-type); + --#{$prefix}shadow-s-color: var(--shadow-s-color); + --#{$prefix}shadow-s-spread: var(--shadow-s-spread); + --#{$prefix}shadow-s-blur: var(--shadow-s-blur); + --#{$prefix}shadow-s-y: var(--shadow-s-y); + --#{$prefix}shadow-s-x: var(--shadow-s-x); + // text colors + --#{$prefix}color-text-accent: var(--color-text-accent); + --#{$prefix}color-text-inverse: var(--color-text-inverse); + --#{$prefix}color-text-danger-active: var(--color-text-danger-active); + --#{$prefix}color-text-danger-hover: var(--color-text-danger-hover); + --#{$prefix}color-text-danger: var(--color-text-danger); + --#{$prefix}color-text-warning-active: var(--color-text-warning-active); + --#{$prefix}color-text-warning-hover: var(--color-text-warning-hover); + --#{$prefix}color-text-warning: var(--color-text-warning); + --#{$prefix}color-text-success-active: var(--color-text-success-active); + --#{$prefix}color-text-success-hover: var(--color-text-success-hover); + --#{$prefix}color-text-success: var(--color-text-success); + --#{$prefix}color-text-disabled: var(--color-text-disabled); + --#{$prefix}color-text-muted: var(--color-text-muted); + --#{$prefix}color-text-secondary-active: var(--color-text-secondary-active); + --#{$prefix}color-text-secondary-hover: var(--color-text-secondary-hover); + --#{$prefix}color-text-secondary: var(--color-text-secondary); + --#{$prefix}color-text-primary-active: var(--color-text-primary-active); + --#{$prefix}color-text-primary-hover: var(--color-text-primary-hover); + --#{$prefix}color-text-primary: var(--color-text-primary); + --#{$prefix}color-text-base: var(--color-text-base); + // border colors + --#{$prefix}color-border-danger-active: var(--color-border-danger-active); + --#{$prefix}color-border-danger-hover: var(--color-border-danger-hover); + --#{$prefix}color-border-danger: var(--color-border-danger); + --#{$prefix}color-border-warning-active: var(--color-border-warning-active); + --#{$prefix}color-border-warning-hover: var(--color-border-warning-hover); + --#{$prefix}color-border-warning: var(--color-border-warning); + --#{$prefix}color-border-success-active: var(--color-border-success-active); + --#{$prefix}color-border-success-hover: var(--color-border-success-hover); + --#{$prefix}color-border-success: var(--color-border-success); + --#{$prefix}color-border-subtle: var(--color-border-subtle); + --#{$prefix}color-border-disabled: var(--color-border-disabled); + --#{$prefix}color-border-inverse: var(--color-border-inverse); + --#{$prefix}color-border-secondary-active: var(--color-border-secondary-active); + --#{$prefix}color-border-secondary-hover: var(--color-border-secondary-hover); + --#{$prefix}color-border-secondary: var(--color-border-secondary); + --#{$prefix}color-border-primary-active: var(--color-border-primary-active); + --#{$prefix}color-border-primary-hover: var(--color-border-primary-hover); + --#{$prefix}color-border-primary: var(--color-border-primary); + // background colors + --#{$prefix}color-background-primary-dark: var(--color-background-primary-dark); + --#{$prefix}color-background-primary-muted: var(--color-background-primary-muted); + --#{$prefix}color-background-danger-active: var(--color-background-danger-active); + --#{$prefix}color-background-danger-hover: var(--color-background-danger-hover); + --#{$prefix}color-background-danger-light: var(--color-background-danger-light); + --#{$prefix}color-background-danger: var(--color-background-danger); + --#{$prefix}color-background-warning-active: var(--color-background-warning-active); + --#{$prefix}color-background-warning-hover: var(--color-background-warning-hover); + --#{$prefix}color-background-warning-light: var(--color-background-warning-light); + --#{$prefix}color-background-warning: var(--color-background-warning); + --#{$prefix}color-background-success-active: var(--color-background-success-active); + --#{$prefix}color-background-success-hover: var(--color-background-success-hover); + --#{$prefix}color-background-success-light: var(--color-background-success-light); + --#{$prefix}color-background-success: var(--color-background-success); + --#{$prefix}color-background-emphasis: var(--color-background-emphasis); + --#{$prefix}color-background-subtle: var(--color-background-subtle); + --#{$prefix}color-background-disabled: var(--color-background-disabled); + --#{$prefix}color-background-inverse: var(--color-background-inverse); + --#{$prefix}color-background-muted: var(--color-background-muted); + --#{$prefix}color-background-accent-hover: var(--color-background-accent-hover); + --#{$prefix}color-background-accent: var(--color-background-accent); + --#{$prefix}color-background-secondary-lighter: var(--color-background-secondary-lighter); + --#{$prefix}color-background-secondary-light: var(--color-background-secondary-light); + --#{$prefix}color-background-secondary-active: var(--color-background-secondary-active); + --#{$prefix}color-background-secondary-hover: var(--color-background-secondary-hover); + --#{$prefix}color-background-secondary: var(--color-background-secondary); + --#{$prefix}color-background-primary-active: var(--color-background-primary-active); + --#{$prefix}color-background-primary-hover: var(--color-background-primary-hover); + --#{$prefix}color-background-primary-lighter: var(--color-background-primary-lighter); + --#{$prefix}color-background-primary-light: var(--color-background-primary-light); + --#{$prefix}color-background-primary: var(--color-background-primary); + // status colors + --#{$prefix}color-status-danger: var(--color-background-danger); + --#{$prefix}color-status-danger-hover: var(--color-background-danger-hover); + --#{$prefix}color-status-danger-active: var(--color-background-danger-active); + --#{$prefix}color-status-success: var(--color-background-success); + --#{$prefix}color-status-success-hover: var(--color-background-success-hover); + --#{$prefix}color-status-success-active: var(--color-background-success-active); + --#{$prefix}color-status-info: var(--color-background-info); + --#{$prefix}color-status-info-hover: var(--color-background-info-hover); + --#{$prefix}color-status-info-active: var(--color-background-info-active); + --#{$prefix}color-status-warning: var(--color-background-warning); + --#{$prefix}color-status-warning-hover: var(--color-background-warning-hover); + --#{$prefix}color-status-warning-active: var(--color-background-warning-active); + // global colors + --#{$prefix}color-outline-focus: var(--color-outline-focus); + --#{$prefix}color-page-background: var(--color-background-inverse); // icons - --bsi-icon-error-active: cssToken.var(--icon-error-active); - --bsi-icon-error-hover: cssToken.var(--icon-error-hover); - --bsi-icon-error: cssToken.var(--icon-error); - --bsi-icon-warning-active: cssToken.var(--icon-warning-active); - --bsi-icon-warning-hover: cssToken.var(--icon-warning-hover); - --bsi-icon-warning: cssToken.var(--icon-warning); - --bsi-icon-success-active: cssToken.var(--icon-success-active); - --bsi-icon-success-hover: cssToken.var(--icon-success-hover); - --bsi-icon-success: cssToken.var(--icon-success); - --bsi-icon-secondary-active: cssToken.var(--icon-secondary-active); - --bsi-icon-inverse: cssToken.var(--icon-inverse); - --bsi-icon-secondary-hover: cssToken.var(--icon-secondary-hover); - --bsi-icon-secondary: cssToken.var(--icon-secondary); - --bsi-icon-primary-active: cssToken.var(--icon-primary-active); - --bsi-icon-primary-hover: cssToken.var(--icon-primary-hover); - --bsi-icon-primary: cssToken.var(--icon-primary); - --bsi-icon-default: cssToken.var(--icon-default); + --#{$prefix}icon-danger-active: var(--icon-danger-active); + --#{$prefix}icon-danger-hover: var(--icon-danger-hover); + --#{$prefix}icon-danger: var(--icon-danger); + --#{$prefix}icon-warning-active: var(--icon-warning-active); + --#{$prefix}icon-warning-hover: var(--icon-warning-hover); + --#{$prefix}icon-warning: var(--icon-warning); + --#{$prefix}icon-success-active: var(--icon-success-active); + --#{$prefix}icon-success-hover: var(--icon-success-hover); + --#{$prefix}icon-success: var(--icon-success); + --#{$prefix}icon-secondary-active: var(--icon-secondary-active); + --#{$prefix}icon-inverse: var(--icon-inverse); + --#{$prefix}icon-secondary-hover: var(--icon-secondary-hover); + --#{$prefix}icon-secondary: var(--icon-secondary); + --#{$prefix}icon-primary-active: var(--icon-primary-active); + --#{$prefix}icon-primary-hover: var(--icon-primary-hover); + --#{$prefix}icon-primary: var(--icon-primary); + --#{$prefix}icon-default: var(--icon-default); } diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss index de0de7d14..61c76d2b4 100644 --- a/src/scss/base/_variables.scss +++ b/src/scss/base/_variables.scss @@ -1,3 +1,7 @@ +// OLD VARIABLES ============================================================ +// Color vars +// HSB (https://it.wikipedia.org/wiki/Hue_Saturation_Brightness, coincidente con il modello HSV) +// è lo spazio colore scelto per ottenere le varianti colore della tonalità primaria. // Color system ============================================================== @@ -17,13 +21,62 @@ $color-contrast-light: cssToken.var(--color-white) !default; $yiq-text-light: sassToken.$color-text-inverse !default; $yiq-text-dark: sassToken.$color-text-base !default; -// $gray-secondary: hsl(210, 17%, 44%) !default; // color-slate-44 -// $gray-tertiary: hsb(205, 35, 54) !default; -// $gray-quaternary: hsb(238, 1, 100) !default; -// $gray-border: hsl(210, 4%, 78%) !default; // color-border-subtle -// $gray-disabled: hsl(210, 3%, 85%) !default; // color-background-disabled -// $gray-label-disabled: hsl(210, 12%, 44%) !default; // color-text-disabled -// $gray-border-disabled: $gray-disabled !default; // color-border-disabled +$primary: hsb($primary-h, $primary-s, $primary-b) !default; // color-blue-40 + +$indigo: hsb(243, 70, 100) !default; +$purple: hsb(243, 40, 100) !default; +$pink: hsb(350, 30, 100) !default; +$red: hsl(350, 60%, 50%) !default; // color-red-50 +$orange: hsl(36, 100%, 30%) !default; // color-orange-30 +$yellow: hsb(44, 55, 100) !default; +$green: hsl(160, 100%, 25%) !default; // color-emerald-25 +$teal: hsl(178, 90%, 32%) !default; +$cyan: hsb(178, 100, 100) !default; +$blue: hsb(210, 100, 90) !default; +$light: hsb(255, 5, 95) !default; +$dark: hsl(210, 54%, 20%) !default; // color-slate-20 + +$yiq-text-light: $white !default; +$yiq-text-dark: $black !default; + +$red-accessible: $red !default; +$orange-accessible: $orange !default; +$yellow-accessible: hsb(44, 100, 59) !default; +$green-accessible: $green !default; + +$gray-primary: hsb(210, 38.9, 44.3) !default; +$gray-secondary: hsl(210, 17%, 44%) !default; // color-slate-44 +$gray-tertiary: hsb(205, 35, 54) !default; +$gray-quaternary: hsb(238, 1, 100) !default; +$gray-border: hsl(210, 4%, 78%) !default; // color-border-subtle +$gray-disabled: hsl(210, 3%, 85%) !default; // color-background-disabled +$gray-label-disabled: hsl(210, 12%, 44%) !default; // color-text-disabled +$gray-border-disabled: $gray-disabled !default; // color-border-disabled + +$secondary: $gray-secondary !default; + +$colors: () !default; // Ensure $colors is defined +$colors: map-merge( + ( + 'indigo': $indigo, + 'purple': $purple, + 'pink': $pink, + 'red': $red, + 'orange': $orange, + 'yellow': $yellow, + 'green': $green, + 'teal': $teal, + 'cyan': $cyan, + 'white': $white, + 'gray': $gray-600, + 'gray-dark': $gray-800, + 'blue': $blue, + 'gray-secondary': $gray-secondary, + 'gray-tertiary': $gray-tertiary, + 'gray-quaternary': $gray-quaternary, + ), + $colors +); // Border Color // $border-color: $gray-border !default; // Replaced with --#{$prefix}-color-border @@ -110,6 +163,9 @@ $enable-negative-margins: false !default; $enable-deprecation-messages: true !default; $enable-important-utilities: true !default; +// Prefix for :root CSS variables +$prefix: bsi- !default; + // Spacing // // Control the default styling of most Bootstrap elements by modifying these @@ -189,7 +245,6 @@ $border-widths: ( ) !default; $border-style: solid !default; -var(--#{$prefix}-color-border) !default-translucent: rgba($black, 0.175) !default; // Typography @@ -1762,3 +1817,19 @@ $offcanvas-color: $modal-content-color !default; $offcanvas-box-shadow: $modal-content-box-shadow-xs !default; $offcanvas-backdrop-bg: $modal-backdrop-bg !default; $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; + +// ============================================================ + +// NEW VARIABLES + +// Variables used in _maps.scss +$color-theme-primary: var(--#{$prefix}theme-primary); +// $color-theme-secondary: var(--#{$prefix}primary); +// $color-theme-accent: var(--#{$prefix}accent); + +$color-status-info: var(--color-text-secondary); +$color-status-success: var(--color-status-success); +$color-status-warning: var(--color-status-warning); +$color-status-danger: var(--color-status-danger); + + diff --git a/src/scss/bootstrap-italia.scss b/src/scss/bootstrap-italia.scss index f799f445f..22cf14e34 100644 --- a/src/scss/bootstrap-italia.scss +++ b/src/scss/bootstrap-italia.scss @@ -10,11 +10,8 @@ // ------------------------------ // Settings & Variables -// Variables from the design tokens are imported here. -@use "../../../node_modules/design-tokens-italia/css/_variables.css" as cssToken; -@use '../../../node_modules/design-tokens-italia/scss/_variables' as sassToken; -@import 'base/root'; @import 'base/variables'; +@import 'base/root'; // ------------------------------ // Functions, maps and mixins From e573e2e17be86b0155045a86952b22e30e74e73c Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 2 Jan 2025 11:56:27 +0100 Subject: [PATCH 08/59] fix: remove unprefixed vars --- src/scss/base/mixins/_banner.scss | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/scss/base/mixins/_banner.scss b/src/scss/base/mixins/_banner.scss index bca95a871..dbdb07c89 100644 --- a/src/scss/base/mixins/_banner.scss +++ b/src/scss/base/mixins/_banner.scss @@ -1,11 +1,9 @@ @mixin bsBanner($file) { - /*! - * Bootstrap Italia #{$file} (https://italia.github.io/bootstrap-italia/) - * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS - * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE) - * This a fork of Bootstrap: Initial license below - * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors- Copyright 2011-2022 Twitter, Inc. - * Licensed under MIT license (https://github.com/twbs/bootstrap/blob/main/LICENSE) - */ + /* Bootstrap Italia #{$file} (https://italia.github.io/bootstrap-italia/) */ + /* Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS */ + /* Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE) */ + /* This a fork of Bootstrap: Initial license below */ + /* Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/) */ + /* Copyright 2011-2022 The Bootstrap Authors- Copyright 2011-2022 Twitter, Inc. */ + /* Licensed under MIT license (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ } From 68a9f5275c87166389232c88b161446ae59dc674 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 2 Jan 2025 12:25:38 +0100 Subject: [PATCH 09/59] fix: remove duplicate vars --- src/scss/base/_root.scss | 68 +--------------------------------------- 1 file changed, 1 insertion(+), 67 deletions(-) diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss index f63c6409e..f41888e34 100644 --- a/src/scss/base/_root.scss +++ b/src/scss/base/_root.scss @@ -6,72 +6,6 @@ // 2. they reference the “theme italia“ palette in the design system .italia. // 3. change the $prefix cssToken.variable in "_variables.scss" to customize the theme name in the CSS custom properties. // 4. customize these values to change the theme colors throughout your project. - --bsi-theme-primary: cssToken.var(--theme-italia-base); - --bsi-theme-primary-muted: cssToken.var(--theme-italia-muted); - --bsi-theme-primary-dark: cssToken.var(--theme-italia-dark); - --bsi-theme-primary-light: cssToken.var(--theme-italia-light); - --bsi-theme-primary-lighter: cssToken.var(--theme-italia-lighter); - // spacing - --bsi-spacing-inset-3xl: cssToken.var(--spacing-inset-3xl); - --bsi-spacing-inset-xxl: cssToken.var(--spacing-inset-xxl); - --bsi-spacing-inset-xl: cssToken.var(--spacing-inset-xl); - --bsi-spacing-inset-l: cssToken.var(--spacing-inset-l); - --bsi-spacing-inset-m: cssToken.var(--spacing-inset-m); - --bsi-spacing-inset-s: cssToken.var(--spacing-inset-s); - --bsi-spacing-inset-xs: cssToken.var(--spacing-inset-xs); - --bsi-spacing-inline-l: cssToken.var(--spacing-inline-l); - --bsi-spacing-inline-m: cssToken.var(--spacing-inline-m); - --bsi-spacing-inline-s: cssToken.var(--spacing-inline-s); - --bsi-spacing-inline-xs: cssToken.var(--spacing-inline-xs); - --bsi-spacing-inline-xxs: cssToken.var(--spacing-inline-xxs); - --bsi-spacing-stack-xxl: cssToken.var(--spacing-stack-xxl); - --bsi-spacing-stack-xl: cssToken.var(--spacing-stack-xl); - --bsi-spacing-stack-l: cssToken.var(--spacing-stack-l); - --bsi-spacing-stack-m: cssToken.var(--spacing-stack-m); - --bsi-spacing-stack-s: cssToken.var(--spacing-stack-s); - --bsi-spacing-stack-xs: cssToken.var(--spacing-stack-xs); - // typography - --bsi-font-mono: cssToken.var(--font-mono); - --bsi-font-serif: cssToken.var(--font-serif); - --bsi-font-sans: cssToken.var(--font-sans); - --bsi-font-weight-bold: cssToken.var(--font-weight-bold); - --bsi-font-weight-semibold: cssToken.var(--font-weight-semibold); - --bsi-font-weight-regular: cssToken.var(--font-weight-regular); - --bsi-font-weight-light: cssToken.var(--font-weight-light); - --bsi-font-weight-extra-light: cssToken.var(--font-weight-extra-light); - --bsi-font-size-10: cssToken.var(--font-size-10); - --bsi-font-size-9: cssToken.var(--font-size-9); - --bsi-font-size-8: cssToken.var(--font-size-8); - --bsi-font-size-7: cssToken.var(--font-size-7); - --bsi-font-size-6: cssToken.var(--font-size-6); - --bsi-font-size-5: cssToken.var(--font-size-5); - --bsi-font-size-4: cssToken.var(--font-size-4); - --bsi-font-size-3: cssToken.var(--font-size-3); - --bsi-font-size-2: cssToken.var(--font-size-2); - --bsi-font-size-1: cssToken.var(--font-size-1); - --bsi-font-line-height-5: cssToken.var(--font-line-height-5); - --bsi-font-line-height-4: cssToken.var(--font-line-height-4); - --bsi-font-line-height-3: cssToken.var(--font-line-height-3); - --bsi-font-line-height-2: cssToken.var(--font-line-height-2); - --bsi-font-line-height-1: cssToken.var(--font-line-height-1); - --bsi-font-tracking-normal: cssToken.var(--font-tracking-normal); - --bsi-font-tracking-tight: cssToken.var(--font-tracking-tight); - --bsi-font-tracking-narrow: cssToken.var(--font-tracking-narrow); - --bsi-font-tracking-short: cssToken.var(--font-tracking-short); - // --bsi-lead-line-height-l: cssToken.var(--lead-line-height-l); - // --bsi-body-line-height-l: cssToken.var(--body-line-height-l); - // --bsi-heading-6-line-height-l: cssToken.var(--heading-6-line-height-l); - // --bsi-heading-5-line-height-l: cssToken.var(--heading-5-line-height-l); - // --bsi-heading-4-line-height-l: cssToken.var(--heading-4-line-height-l); - // --bsi-heading-3-line-height-l: cssToken.var(--heading-3-line-height-l); - // --bsi-heading-2-line-height-l: cssToken.var(--heading-2-line-height-l); - // --bsi-heading-1-line-height-l: cssToken.var(--heading-1-line-height-l); - // --bsi-heading-6-line-height: cssToken.var(--heading-6-line-height); - // --bsi-heading-5-line-height: cssToken.var(--heading-5-line-height); - // --bsi-heading-4-line-height: cssToken.var(--heading-4-line-height); - // --bsi-heading-3-line-height: cssToken.var(--heading-3-line-height); - // --bsi-heading-2-line-height: cssToken.var(--heading-2-line-height); - // --bsi-heading-1-line-height: cssToken.var(--heading-1-line-height); // Colors // @@ -349,7 +283,7 @@ --#{$prefix}color-background-primary-lighter: var(--color-background-primary-lighter); --#{$prefix}color-background-primary-light: var(--color-background-primary-light); --#{$prefix}color-background-primary: var(--color-background-primary); - // status colors + // status colors - reference the background category colors only --#{$prefix}color-status-danger: var(--color-background-danger); --#{$prefix}color-status-danger-hover: var(--color-background-danger-hover); --#{$prefix}color-status-danger-active: var(--color-background-danger-active); From 3a4affd88f7139a4dec0c527e258fc600896e380 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 2 Jan 2025 12:26:00 +0100 Subject: [PATCH 10/59] feat: add status map --- src/scss/base/_maps.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/scss/base/_maps.scss b/src/scss/base/_maps.scss index e2a30229c..dc3b66ef4 100644 --- a/src/scss/base/_maps.scss +++ b/src/scss/base/_maps.scss @@ -52,3 +52,11 @@ $utilities-border-colors: map-loop($utilities-border, rgba-css-var, '$key', 'bor $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; $gutters: $spacers !default; + +$status: ( + 'primary': $color-theme-primary, + 'info': $color-status-info, + 'success': $color-status-success, + 'warning': $color-status-warning, + 'danger': $color-status-danger, +) !default; From 7272866c9cdc48b8060f9e659a107bab401c5c3d Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 2 Jan 2025 12:26:08 +0100 Subject: [PATCH 11/59] fix: vars reference --- src/scss/base/_variables.scss | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss index 61c76d2b4..71b1da1a2 100644 --- a/src/scss/base/_variables.scss +++ b/src/scss/base/_variables.scss @@ -15,8 +15,8 @@ $min-contrast-ratio: 4.5 !default; // Customize the light and dark text colors for use in our color contrast function. -$color-contrast-dark: cssToken.var(--color-black) !default; -$color-contrast-light: cssToken.var(--color-white) !default; +$color-contrast-dark: var(--color-black) !default; +$color-contrast-light: var(--color-white) !default; $yiq-text-light: sassToken.$color-text-inverse !default; $yiq-text-dark: sassToken.$color-text-base !default; @@ -1824,12 +1824,9 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; // Variables used in _maps.scss $color-theme-primary: var(--#{$prefix}theme-primary); -// $color-theme-secondary: var(--#{$prefix}primary); -// $color-theme-accent: var(--#{$prefix}accent); - -$color-status-info: var(--color-text-secondary); -$color-status-success: var(--color-status-success); -$color-status-warning: var(--color-status-warning); -$color-status-danger: var(--color-status-danger); +$color-status-info: var(---#{$prefix}color-background-secondary); +$color-status-success: var(---#{$prefix}color-status-success); +$color-status-warning: var(---#{$prefix}color-status-warning); +$color-status-danger: var(---#{$prefix}color-status-danger); From 4a9a5b4914cc7297b622adaab77f2ef3a056ca40 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 2 Jan 2025 12:26:19 +0100 Subject: [PATCH 12/59] feat: accordion vars --- src/scss/components/_accordion.scss | 64 ++++++++++++++++------------- 1 file changed, 35 insertions(+), 29 deletions(-) diff --git a/src/scss/components/_accordion.scss b/src/scss/components/_accordion.scss index 3002995f4..21aba23b3 100644 --- a/src/scss/components/_accordion.scss +++ b/src/scss/components/_accordion.scss @@ -1,3 +1,34 @@ +// +// Accordion custom properties +// + +$arrow-size: $font-size-base * 0.5; + +.accordion { + --#{$prefix}accordion-color: var(--#{$prefix}color-text-base, #{$accordion-color}); + --#{$prefix}accordion-bg: #{$accordion-bg}; + --#{$prefix}accordion-transition: #{$accordion-transition}; + --#{$prefix}accordion-border-color: #{$accordion-border-color}; + --#{$prefix}accordion-border-width: #{$accordion-border-width}; + --#{$prefix}accordion-border-radius: #{$accordion-border-radius}; + --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; + --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; + --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; + --#{$prefix}accordion-btn-color: #{$accordion-button-color}; + --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; + --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; + --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; + --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; + --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; + --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; + --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; + --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; + --#{$prefix}accordion-active-color: #{$accordion-button-active-color}; + --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg}; +} + // // Base styles // @@ -20,7 +51,8 @@ &:not(.collapsed) { color: var(--#{$prefix}accordion-active-color); background-color: var(--#{$prefix}accordion-active-bg); - box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list + // stylelint-disable-line function-disallowed-list + box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); &::after { background-image: var(--#{$prefix}accordion-btn-active-icon); @@ -83,34 +115,8 @@ } } -$arrow-size: $font-size-base * 0.5; - //collapse wrapper .accordion { - // scss-docs-start accordion-css-vars - --#{$prefix}accordion-color: #{$accordion-color}; - --#{$prefix}accordion-bg: #{$accordion-bg}; - --#{$prefix}accordion-transition: #{$accordion-transition}; - --#{$prefix}accordion-border-color: #{$accordion-border-color}; - --#{$prefix}accordion-border-width: #{$accordion-border-width}; - --#{$prefix}accordion-border-radius: #{$accordion-border-radius}; - --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; - --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; - --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; - --#{$prefix}accordion-btn-color: #{$accordion-button-color}; - --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; - --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; - --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; - --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; - --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; - --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; - --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; - --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; - --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; - --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; - --#{$prefix}accordion-active-color: #{$accordion-button-active-color}; - --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg}; - // scss-docs-end accordion-css-vars border-bottom: 1px solid $gray-border; // UI kit; .accordion { border: 1px solid $gray-border; // UI kit; @@ -212,7 +218,7 @@ $arrow-size: $font-size-base * 0.5; @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); } } - border: none; + // border: none; &:first-of-type, &:last-of-type { border-radius: 0; @@ -282,7 +288,7 @@ $arrow-size: $font-size-base * 0.5; // body .accordion-body { padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x); - padding: 12px 24px 42px; + // padding: 12px 24px 42px; font-size: 1rem; line-height: 1.5rem; @include media-breakpoint-up(lg) { From cb4e4d67954168538517ff1cd78a38529d0248ee Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 2 Jan 2025 12:26:27 +0100 Subject: [PATCH 13/59] feat: alert vars --- src/scss/components/_alert.scss | 38 ++++++++++++++++++++++----------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss index 6cc9dd20c..d940a2eff 100644 --- a/src/scss/components/_alert.scss +++ b/src/scss/components/_alert.scss @@ -1,50 +1,62 @@ +// CSS Custom Properties +:root { + --alert-spacing-inset: var(--spacing-inset-s); + --alert-color-background: var(--color-background-inverse); + --alert-color-border: var(--color-border-secondary); + --alert-color-text: var(--color-text-base); + --alert-color-heading: var(--color-text-base); + --alert-margin: var(--spacing-stack-m); +} + // Base styles .alert { position: relative; - padding: $alert-padding-y $alert-padding-x; - margin-bottom: $alert-margin-bottom; - border: 1px solid $color-border-secondary; + padding: var(--alert-spacing-inset); + margin-bottom: var(--alert-margin); + border: 1px solid var(--alert-color-border); padding-left: 4em; - background-color: $white; - border-radius: 0; - color: $color-text-base; // UI kit + background-color: var(--alert-color-background); + color: var(--alert-color-text); background-position: 20px 12px; background-repeat: no-repeat; background-size: 32px 32px; + + @include media-breakpoint-up(lg) { + --alert-spacing-inset: var(--spacing-inset-m); + } } // Headings for larger alerts .alert-heading { // Specified to prevent conflicts of changing $headings-color - color: $color-text-base; // UI kit - line-height: 1; + color: var(--alert-color-heading); } // Provide class for links that match alerts .alert-link { - color: $link-color; - font-weight: $font-weight-semibold; + font-weight: var(--font-weight-semibold); text-decoration: underline; } // Dismissible alerts // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($alert-padding-x * 2); + padding-right: var(--alert-spacing-inset); // Adjust close link position .btn-close { position: absolute; top: 50%; right: 0; transform: translateY(-50%); - padding: $alert-padding-x; + padding: var(--alert-spacing-inset); color: inherit; } } // Alternate styles // Generate contextual modifier classes for colorizing the alert. -@each $color, $value in $theme-colors { +// Loop through theme colors to generate contextual modifier classes for colorizing the alert +@each $color, $value in $status { @if ($color == 'danger' or $color == 'warning' or $color == 'success' or $color == 'info' or $color == 'primary') { .alert-#{$color} { border-left: 8px solid #{$value}; From 311228bfc2735025d00f8764c6d5d1658c7780b1 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 3 Jan 2025 13:01:49 +0100 Subject: [PATCH 14/59] refactor: alphabetical order and tokens import --- src/scss/bootstrap-italia.scss | 132 ++++++++++++++++----------------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/src/scss/bootstrap-italia.scss b/src/scss/bootstrap-italia.scss index 22cf14e34..818be2201 100644 --- a/src/scss/bootstrap-italia.scss +++ b/src/scss/bootstrap-italia.scss @@ -1,3 +1,5 @@ +@use '~design-tokens-italia/css/dsi-tokens.css'; + @import 'base/mixins/banner'; @include bsBanner(''); @@ -39,109 +41,107 @@ // ------------------------------ // Components -@import 'components/type'; -@import 'components/grid'; -@import 'components/tables'; -@import 'components/breadcrumb'; -@import 'components/modal'; @import 'components/accordion'; -@import 'components/carousel'; -@import 'components/calendar'; +@import 'components/accept-overlay'; +@import 'components/affix'; @import 'components/alert'; +@import 'components/anchor'; +@import 'components/avatar'; +@import 'components/back-to-top'; +@import 'components/badge'; +@import 'components/bottomnav'; +@import 'components/breadcrumb'; @import 'components/button-group'; @import 'components/buttons'; -@import 'components/font'; -@import 'components/dropdown'; -@import 'components/pager'; -@import 'components/tab'; +@import 'components/calendar'; +@import 'components/callout'; +@import 'components/card'; +@import 'components/carousel'; +@import 'components/chips'; +@import 'components/code'; @import 'components/cookiebar'; -@import 'components/hero'; +@import 'components/dimmer'; +@import 'components/dropdown'; +@import 'components/figcaption'; +@import 'components/font'; @import 'components/forward'; -@import 'components/back-to-top'; -@import 'components/list-group'; +@import 'components/grid'; +@import 'components/gridlist'; +@import 'components/hero'; +@import 'components/images'; +@import 'components/imgresponsive'; @import 'components/linklist'; -@import 'components/offcanvas'; // Keep? -@import 'components/navigation'; -@import 'components/skiplinks'; -@import 'components/affix'; -@import 'components/sidebar'; -@import 'components/sidebarthemes'; +@import 'components/list'; +@import 'components/list-group'; +@import 'components/map'; @import 'components/megamenu'; -@import 'components/bottomnav'; +@import 'components/modal'; @import 'components/navscroll'; @import 'components/navscrolltheme'; -@import 'components/callout'; -@import 'components/toolbar'; -@import 'components/sections'; +@import 'components/navigation'; +@import 'components/navigationtheme'; @import 'components/notifications'; -@import 'components/avatar'; -@import 'components/thumbnav'; -@import 'components/steppers'; -@import 'components/card'; -@import 'components/imgresponsive'; +@import 'components/offcanvas'; // Keep? @import 'components/overlay-panel'; -@import 'components/progress-donuts'; +@import 'components/pager'; +@import 'components/page-scroll'; +@import 'components/pagination'; +@import 'components/placeholders'; // Keep? +@import 'components/point-list'; +@import 'components/popover'; +@import 'components/print'; @import 'components/progress-bars'; +@import 'components/progress-donuts'; @import 'components/progress-spinners'; -@import 'components/gridlist'; -@import 'components/popover'; -@import 'components/tooltip'; -@import 'components/videoplayer'; -@import 'components/list'; -@import 'components/chips'; @import 'components/rating'; -@import 'components/dimmer'; -@import 'components/accept-overlay'; -@import 'components/timeline'; -@import 'components/anchor'; -@import 'components/map'; -@import 'components/point-list'; @import 'components/rating-list'; -@import 'components/badge'; -@import 'components/figcaption'; +@import 'components/sections'; +@import 'components/sidebar'; +@import 'components/sidebarthemes'; +@import 'components/skiplinks'; +@import 'components/steppers'; @import 'components/sticky'; -@import 'components/print'; -@import 'components/code'; -@import 'components/images'; -@import 'components/just-validate'; -@import 'components/page-scroll'; -@import 'components/pagination'; -@import 'components/placeholders'; // Keep? +@import 'components/tab'; +@import 'components/tables'; +@import 'components/timeline'; @import 'components/toasts'; +@import 'components/toolbar'; +@import 'components/tooltip'; +@import 'components/type'; +@import 'components/videoplayer'; // ------------------------------ // Form -@import 'forms/labels'; -@import 'forms/form-text'; -@import 'forms/form-control'; -@import 'forms/form-check'; -@import 'forms/form-range'; +@import 'forms/accessible-autocomplete'; +@import 'forms/autocomplete'; @import 'forms/floating-labels'; -@import 'forms/input-group'; -@import 'forms/validation'; +@import 'forms/form-check'; +@import 'forms/form-control'; @import 'forms/form-input-file'; @import 'forms/form-input-number'; @import 'forms/form-input-upload'; -@import 'forms/form-toggles'; @import 'forms/form-password'; +@import 'forms/form-range'; @import 'forms/form-select'; +@import 'forms/form-text'; +@import 'forms/form-toggles'; @import 'forms/form-transfer'; -@import 'forms/accessible-autocomplete'; -@import 'forms/autocomplete'; @import 'forms/forms'; +@import 'forms/input-group'; +@import 'forms/labels'; // ------------------------------ // Nav & Header -@import 'components/nav'; -@import 'components/navbar'; -@import 'components/headerslim'; -@import 'components/headerslimtheme'; +@import 'components/header'; @import 'components/headercenter'; @import 'components/headercentertheme'; @import 'components/headernavbar'; @import 'components/headernavbartheme'; -@import 'components/header'; +@import 'components/headerslim'; +@import 'components/headerslimtheme'; +@import 'components/navbar'; @import 'components/navigationtheme'; +@import 'components/nav'; // ------------------------------ // Footer From 6f2b2a786d3bc626fd9bf63131cb65970daf4936 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 3 Jan 2025 13:02:04 +0100 Subject: [PATCH 15/59] fix: restore gradient mixin --- src/scss/base/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss index f637065c3..8c5e219ec 100644 --- a/src/scss/base/_mixins.scss +++ b/src/scss/base/_mixins.scss @@ -35,7 +35,7 @@ // Skins @import 'mixins/border-radius'; @import 'mixins/box-shadow'; -// @import 'mixins/gradients'; // Disabled as not used in the project +@import 'mixins/gradients'; // Disabled as not used in the project @import 'mixins/transition'; // Layout From 0c8a8f69aa717341954c520de6bc5ea1335ae0bf Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 3 Jan 2025 13:03:06 +0100 Subject: [PATCH 16/59] refactor: restore bs variables and add token prefix --- src/scss/base/_root.scss | 559 +++++++++++++++++++-------------------- 1 file changed, 270 insertions(+), 289 deletions(-) diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss index f41888e34..7ac9f84a9 100644 --- a/src/scss/base/_root.scss +++ b/src/scss/base/_root.scss @@ -1,320 +1,301 @@ -@import '../../../node_modules/design-tokens-italia/css/_variables.css'; - :root { - // theme colors - // 1. theme primary colors are used for primary buttons, links, and more. - // 2. they reference the “theme italia“ palette in the design system .italia. - // 3. change the $prefix cssToken.variable in "_variables.scss" to customize the theme name in the CSS custom properties. - // 4. customize these values to change the theme colors throughout your project. - - // Colors - // - // Generate palettes for full colors, grays, and theme colors. - - // @each $color, $value in $colors { - // --#{$prefix}#{$color}: #{$value}; - // } - - // @each $color, $value in $grays { - // --#{$prefix}gray-#{$color}: #{$value}; - // } + @each $color, $value in $colors { + --#{$prefix}#{$color}: #{$value}; + } - // @each $color, $value in $theme-colors { - // --#{$prefix}#{$color}: #{$value}; - // } + @each $color, $value in $grays { + --#{$prefix}gray-#{$color}: #{$value}; + } - // @each $color, $value in $theme-colors-rgb { - // --#{$prefix}#{$color}-rgb: #{$value}; - // } + @each $color, $value in $theme-colors { + --#{$prefix}#{$color}: #{$value}; + } - // --#{$prefix}white-rgb: #{to-rgb($white)}; - // --#{$prefix}black-rgb: #{to-rgb($black)}; - // --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; - // --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; + @each $color, $value in $theme-colors-rgb { + --#{$prefix}#{$color}-rgb: #{$value}; + } + + --#{$prefix}white-rgb: #{to-rgb($white)}; + --#{$prefix}black-rgb: #{to-rgb($black)}; + --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; // Fonts // Note: Use `inspect` for lists so that quoted items keep the quotes. // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 - // --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; - // --#{$prefix}font-monospace: #{inspect($font-family-monospace)}; - // --#{$prefix}gradient: #{$gradient}; + --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; + --#{$prefix}font-monospace: #{inspect($font-family-monospace)}; + --#{$prefix}gradient: #{$gradient}; // Root and body // scss-docs-start root-body-variables - // @if $font-size-root != null { - // --#{$prefix}root-font-size: #{$font-size-root}; - // } - // --#{$prefix}body-font-family: #{$font-family-base}; - // @include rfs($font-size-base, --#{$prefix}body-font-size); - // --#{$prefix}body-font-weight: #{$font-weight-base}; - // --#{$prefix}body-line-height: #{$line-height-base}; - // --#{$prefix}body-color: #{$body-color}; - // @if $body-text-align != null { - // --#{$prefix}body-text-align: #{$body-text-align}; - // } - // --#{$prefix}body-bg: #{$body-bg}; + @if $font-size-root != null { + --#{$prefix}root-font-size: #{$font-size-root}; + } + --#{$prefix}body-font-family: #{$font-family-base}; + @include rfs($font-size-base, --#{$prefix}body-font-size); + --#{$prefix}body-font-weight: #{$font-weight-base}; + --#{$prefix}body-line-height: #{$line-height-base}; + --#{$prefix}body-color: #{$body-color}; + @if $body-text-align != null { + --#{$prefix}body-text-align: #{$body-text-align}; + } + --#{$prefix}body-bg: #{$body-bg}; // scss-docs-end root-body-variables // scss-docs-start root-border-var - // --#{$prefix}border-width: #{$border-width}; - // --#{$prefix}border-style: #{$border-style}; - // --#{$prefix}border-color: #{$border-color}; - // --#{$prefix}border-color-translucent: #{$border-color-translucent}; + --#{$prefix}border-width: #{$border-width}; + --#{$prefix}border-style: #{$border-style}; + --#{$prefix}border-color: #{$border-color}; + --#{$prefix}border-color-translucent: #{$border-color-translucent}; - // --#{$prefix}border-radius: #{$border-radius}; - // --#{$prefix}border-radius-sm: #{$border-radius-sm}; - // --#{$prefix}border-radius-lg: #{$border-radius-lg}; - // --#{$prefix}border-radius-xl: #{$border-radius-xl}; - // --#{$prefix}border-radius-2xl: #{$border-radius-2xl}; - // --#{$prefix}border-radius-pill: #{$border-radius-pill}; + --#{$prefix}border-radius: #{$border-radius}; + --#{$prefix}border-radius-sm: #{$border-radius-sm}; + --#{$prefix}border-radius-lg: #{$border-radius-lg}; + --#{$prefix}border-radius-xl: #{$border-radius-xl}; + --#{$prefix}border-radius-2xl: #{$border-radius-2xl}; + --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var - // --#{$prefix}link-color: #{$link-color}; - // --#{$prefix}link-hover-color: #{$link-hover-color}; + --#{$prefix}link-color: #{$link-color}; + --#{$prefix}link-hover-color: #{$link-hover-color}; - // --#{$prefix}code-color: #{$code-color}; + --#{$prefix}code-color: #{$code-color}; - // --#{$prefix}highlight-bg: #{$mark-bg}; + --#{$prefix}highlight-bg: #{$mark-bg}; - // ======================================================================= - // theme colors - // 1. theme primary colors are used for primary buttons, links, and more. - // 2. they reference the “theme italia“ palette in the design system .italia. - // 3. change the $prefix variable in "_variables.scss" to customize the theme name in the CSS custom properties. - // 4. customize these values to change the theme colors throughout your project. - // theme colors - customize those values to change the theme throughout your project. - --#{$prefix}theme-primary: var(--theme-italia-base); - --#{$prefix}theme-primary-muted: var(--theme-italia-muted); - --#{$prefix}theme-primary-dark: var(--theme-italia-dark); - --#{$prefix}theme-primary-light: var(--theme-italia-light); - --#{$prefix}theme-primary-lighter: var(--theme-italia-lighter); + // theme colors + --#{$prefix}theme-primary: var(--dsi-theme-italia-base); + --#{$prefix}theme-primary-muted: var(--dsi-theme-italia-muted); + --#{$prefix}theme-primary-dark: var(--dsi-theme-italia-dark); + --#{$prefix}theme-primary-light: var(--dsi-theme-italia-light); + --#{$prefix}theme-primary-lighter: var(--dsi-theme-italia-lighter); // spacing - --#{$prefix}spacing-inset-3xl: var(--spacing-inset-3xl); - --#{$prefix}spacing-inset-xxl: var(--spacing-inset-xxl); - --#{$prefix}spacing-inset-xl: var(--spacing-inset-xl); - --#{$prefix}spacing-inset-l: var(--spacing-inset-l); - --#{$prefix}spacing-inset-m: var(--spacing-inset-m); - --#{$prefix}spacing-inset-s: var(--spacing-inset-s); - --#{$prefix}spacing-inset-xs: var(--spacing-inset-xs); - --#{$prefix}spacing-inline-l: var(--spacing-inline-l); - --#{$prefix}spacing-inline-m: var(--spacing-inline-m); - --#{$prefix}spacing-inline-s: var(--spacing-inline-s); - --#{$prefix}spacing-inline-xs: var(--spacing-inline-xs); - --#{$prefix}spacing-inline-xxs: var(--spacing-inline-xxs); - --#{$prefix}spacing-stack-xxl: var(--spacing-stack-xxl); - --#{$prefix}spacing-stack-xl: var(--spacing-stack-xl); - --#{$prefix}spacing-stack-l: var(--spacing-stack-l); - --#{$prefix}spacing-stack-m: var(--spacing-stack-m); - --#{$prefix}spacing-stack-s: var(--spacing-stack-s); - --#{$prefix}spacing-stack-xs: var(--spacing-stack-xs); + --#{$prefix}spacing-inset-3xl: var(--dsi-spacing-inset-3xl); + --#{$prefix}spacing-inset-xxl: var(--dsi-spacing-inset-xxl); + --#{$prefix}spacing-inset-xl: var(--dsi-spacing-inset-xl); + --#{$prefix}spacing-inset-l: var(--dsi-spacing-inset-l); + --#{$prefix}spacing-inset-m: var(--dsi-spacing-inset-m); + --#{$prefix}spacing-inset-s: var(--dsi-spacing-inset-s); + --#{$prefix}spacing-inset-xs: var(--dsi-spacing-inset-xs); + --#{$prefix}spacing-inline-l: var(--dsi-spacing-inline-l); + --#{$prefix}spacing-inline-m: var(--dsi-spacing-inline-m); + --#{$prefix}spacing-inline-s: var(--dsi-spacing-inline-s); + --#{$prefix}spacing-inline-xs: var(--dsi-spacing-inline-xs); + --#{$prefix}spacing-inline-xxs: var(--dsi-spacing-inline-xxs); + --#{$prefix}spacing-stack-xxl: var(--dsi-spacing-stack-xxl); + --#{$prefix}spacing-stack-xl: var(--dsi-spacing-stack-xl); + --#{$prefix}spacing-stack-l: var(--dsi-spacing-stack-l); + --#{$prefix}spacing-stack-m: var(--dsi-spacing-stack-m); + --#{$prefix}spacing-stack-s: var(--dsi-spacing-stack-s); + --#{$prefix}spacing-stack-xs: var(--dsi-spacing-stack-xs); // typography - --#{$prefix}font-mono: var(--font-mono); - --#{$prefix}font-serif: var(--font-serif); - --#{$prefix}font-sans: var(--font-sans); - --#{$prefix}font-weight-bold: var(--font-weight-bold); - --#{$prefix}font-weight-semibold: var(--font-weight-semibold); - --#{$prefix}font-weight-regular: var(--font-weight-regular); - --#{$prefix}font-weight-light: var(--font-weight-light); - --#{$prefix}font-weight-extra-light: var(--font-weight-extra-light); - --#{$prefix}font-size-10: var(--font-size-10); - --#{$prefix}font-size-9: var(--font-size-9); - --#{$prefix}font-size-8: var(--font-size-8); - --#{$prefix}font-size-7: var(--font-size-7); - --#{$prefix}font-size-6: var(--font-size-6); - --#{$prefix}font-size-5: var(--font-size-5); - --#{$prefix}font-size-4: var(--font-size-4); - --#{$prefix}font-size-3: var(--font-size-3); - --#{$prefix}font-size-2: var(--font-size-2); - --#{$prefix}font-size-1: var(--font-size-1); - --#{$prefix}font-line-height-5: var(--font-line-height-5); - --#{$prefix}font-line-height-4: var(--font-line-height-4); - --#{$prefix}font-line-height-3: var(--font-line-height-3); - --#{$prefix}font-line-height-2: var(--font-line-height-2); - --#{$prefix}font-line-height-1: var(--font-line-height-1); - --#{$prefix}font-tracking-normal: var(--font-tracking-normal); - --#{$prefix}font-tracking-tight: var(--font-tracking-tight); - --#{$prefix}font-tracking-narrow: var(--font-tracking-narrow); - --#{$prefix}font-tracking-short: var(--font-tracking-short); - // --#{$prefix}lead-line-height-l: var(--lead-line-height-l); - // --#{$prefix}body-line-height-l: var(--body-line-height-l); - // --#{$prefix}heading-6-line-height-l: var(--heading-6-line-height-l); - // --#{$prefix}heading-5-line-height-l: var(--heading-5-line-height-l); - // --#{$prefix}heading-4-line-height-l: var(--heading-4-line-height-l); - // --#{$prefix}heading-3-line-height-l: var(--heading-3-line-height-l); - // --#{$prefix}heading-2-line-height-l: var(--heading-2-line-height-l); - // --#{$prefix}heading-1-line-height-l: var(--heading-1-line-height-l); - // --#{$prefix}heading-6-line-height: var(--heading-6-line-height); - // --#{$prefix}heading-5-line-height: var(--heading-5-line-height); - // --#{$prefix}heading-4-line-height: var(--heading-4-line-height); - // --#{$prefix}heading-3-line-height: var(--heading-3-line-height); - // --#{$prefix}heading-2-line-height: var(--heading-2-line-height); - // --#{$prefix}heading-1-line-height: var(--heading-1-line-height); + --#{$prefix}font-mono: var(--dsi-font-mono); + --#{$prefix}font-serif: var(--dsi-font-serif); + --#{$prefix}font-sans: var(--dsi-font-sans); + --#{$prefix}font-weight-strong: var(--dsi-font-weight-bold); + --#{$prefix}font-weight-solid: var(--dsi-font-weight-semibold); + --#{$prefix}font-weight-base: var(--dsi-font-weight-regular); + --#{$prefix}font-weight-thin: var(--dsi-font-weight-light); + --#{$prefix}font-size-10: var(--dsi-font-size-10); + --#{$prefix}font-size-9: var(--dsi-font-size-9); + --#{$prefix}font-size-8: var(--dsi-font-size-8); + --#{$prefix}font-size-7: var(--dsi-font-size-7); + --#{$prefix}font-size-6: var(--dsi-font-size-6); + --#{$prefix}font-size-5: var(--dsi-font-size-5); + --#{$prefix}font-size-4: var(--dsi-font-size-4); + --#{$prefix}font-size-3: var(--dsi-font-size-3); + --#{$prefix}font-size-2: var(--dsi-font-size-2); + --#{$prefix}font-size-1: var(--dsi-font-size-1); + --#{$prefix}font-line-height-5: var(--dsi-font-line-height-5); + --#{$prefix}font-line-height-4: var(--dsi-font-line-height-4); + --#{$prefix}font-line-height-3: var(--dsi-font-line-height-3); + --#{$prefix}font-line-height-2: var(--dsi-font-line-height-2); + --#{$prefix}font-line-height-1: var(--dsi-font-line-height-1); + --#{$prefix}font-tracking-normal: var(--dsi-font-tracking-normal); + --#{$prefix}font-tracking-tight: var(--dsi-font-tracking-tight); + --#{$prefix}font-tracking-narrow: var(--dsi-font-tracking-narrow); + --#{$prefix}font-tracking-short: var(--dsi-font-tracking-short); + // --#{$prefix}lead-line-height-l: var(--dsi-lead-line-height-l); + // --#{$prefix}body-line-height-l: var(--dsi-body-line-height-l); + // --#{$prefix}heading-6-line-height-l: var(--dsi-heading-6-line-height-l); + // --#{$prefix}heading-5-line-height-l: var(--dsi-heading-5-line-height-l); + // --#{$prefix}heading-4-line-height-l: var(--dsi-heading-4-line-height-l); + // --#{$prefix}heading-3-line-height-l: var(--dsi-heading-3-line-height-l); + // --#{$prefix}heading-2-line-height-l: var(--dsi-heading-2-line-height-l); + // --#{$prefix}heading-1-line-height-l: var(--dsi-heading-1-line-height-l); + // --#{$prefix}heading-6-line-height: var(--dsi-heading-6-line-height); + // --#{$prefix}heading-5-line-height: var(--dsi-heading-5-line-height); + // --#{$prefix}heading-4-line-height: var(--dsi-heading-4-line-height); + // --#{$prefix}heading-3-line-height: var(--dsi-heading-3-line-height); + // --#{$prefix}heading-2-line-height: var(--dsi-heading-2-line-height); + // --#{$prefix}heading-1-line-height: var(--dsi-heading-1-line-height); - --#{$prefix}heading-6-font-size: var(--heading-6-font-size); - --#{$prefix}heading-5-font-size: var(--heading-5-font-size); - --#{$prefix}heading-4-font-size: var(--heading-4-font-size); - --#{$prefix}heading-3-font-size: var(--heading-3-font-size); - --#{$prefix}heading-2-font-size: var(--heading-2-font-size); - --#{$prefix}heading-1-font-size: var(--heading-1-font-size); - --#{$prefix}heading-6-font-size-l: var(--heading-6-font-size-l); - --#{$prefix}heading-5-font-size-l: var(--heading-5-font-size-l); - --#{$prefix}heading-4-font-size-l: var(--heading-4-font-size-l); - --#{$prefix}heading-3-font-size-l: var(--heading-3-font-size-l); - --#{$prefix}heading-2-font-size-l: var(--heading-2-font-size-l); - --#{$prefix}heading-1-font-size-l: var(--heading-1-font-size-l); - --#{$prefix}heading-font-weight: var(--heading-font-weight); - --#{$prefix}heading-font-weight-weak: var(--heading-font-weight-weak); - --#{$prefix}body-font-size-l: var(--body-font-size-l); - --#{$prefix}body-font-size: var(--body-font-size); - --#{$prefix}body-line-height: var(--body-line-height); - --#{$prefix}body-font-weight: var(--body-font-weight); - --#{$prefix}lead-font-size-l: var(--lead-font-size-l); - --#{$prefix}lead-font-size: var(--lead-font-size); - --#{$prefix}lead-font-weight: var(--lead-font-weight); - --#{$prefix}lead-line-height: var(--lead-line-height); - --#{$prefix}caption-font-size: var(--caption-font-size); - --#{$prefix}caption-line-height: var(--caption-line-height); - --#{$prefix}caption-font-weight-regular: var(--caption-font-weight-regular); - --#{$prefix}caption-font-weight-semibold: var(--caption-font-weight-semibold); - --#{$prefix}icon-size-xxl: var(--icon-size-xxl); - --#{$prefix}icon-size-xl: var(--icon-size-xl); - --#{$prefix}icon-size-l: var(--icon-size-l); - --#{$prefix}icon-size-m: var(--icon-size-m); - --#{$prefix}icon-size-s: var(--icon-size-s); - --#{$prefix}border-broad: var(--border-broad); - --#{$prefix}border-thick: var(--border-thick); - --#{$prefix}border-double: var(--border-double); - --#{$prefix}border-base: var(--border-base); - --#{$prefix}radius-rounded: var(--radius-rounded); - --#{$prefix}radius-circle: var(--radius-circle); - --#{$prefix}radius-smooth: var(--radius-smooth); - --#{$prefix}sizing-full: var(--sizing-full); - --#{$prefix}sizing-two-thirds: var(--sizing-two-thirds); - --#{$prefix}sizing-half: var(--sizing-half); - --#{$prefix}sizing-quarter: var(--sizing-quarter); - --#{$prefix}shadow-l-type: var(--shadow-l-type); - --#{$prefix}shadow-l-color: var(--shadow-l-color); - --#{$prefix}shadow-l-spread: var(--shadow-l-spread); - --#{$prefix}shadow-l-blur: var(--shadow-l-blur); - --#{$prefix}shadow-l-y: var(--shadow-l-y); - --#{$prefix}shadow-l-x: var(--shadow-l-x); - --#{$prefix}shadow-m-type: var(--shadow-m-type); - --#{$prefix}shadow-m-color: var(--shadow-m-color); - --#{$prefix}shadow-m-spread: var(--shadow-m-spread); - --#{$prefix}shadow-m-blur: var(--shadow-m-blur); - --#{$prefix}shadow-m-y: var(--shadow-m-y); - --#{$prefix}shadow-m-x: var(--shadow-m-x); - --#{$prefix}shadow-s-type: var(--shadow-s-type); - --#{$prefix}shadow-s-color: var(--shadow-s-color); - --#{$prefix}shadow-s-spread: var(--shadow-s-spread); - --#{$prefix}shadow-s-blur: var(--shadow-s-blur); - --#{$prefix}shadow-s-y: var(--shadow-s-y); - --#{$prefix}shadow-s-x: var(--shadow-s-x); + --#{$prefix}heading-6-font-size: var(--dsi-heading-6-font-size); + --#{$prefix}heading-5-font-size: var(--dsi-heading-5-font-size); + --#{$prefix}heading-4-font-size: var(--dsi-heading-4-font-size); + --#{$prefix}heading-3-font-size: var(--dsi-heading-3-font-size); + --#{$prefix}heading-2-font-size: var(--dsi-heading-2-font-size); + --#{$prefix}heading-1-font-size: var(--dsi-heading-1-font-size); + --#{$prefix}heading-6-font-size-l: var(--dsi-heading-6-font-size-l); + --#{$prefix}heading-5-font-size-l: var(--dsi-heading-5-font-size-l); + --#{$prefix}heading-4-font-size-l: var(--dsi-heading-4-font-size-l); + --#{$prefix}heading-3-font-size-l: var(--dsi-heading-3-font-size-l); + --#{$prefix}heading-2-font-size-l: var(--dsi-heading-2-font-size-l); + --#{$prefix}heading-1-font-size-l: var(--dsi-heading-1-font-size-l); + --#{$prefix}heading-font-weight: var(--dsi-heading-font-weight); + --#{$prefix}heading-font-weight-weak: var(--dsi-heading-font-weight-weak); + --#{$prefix}body-font-size-l: var(--dsi-body-font-size-l); + --#{$prefix}body-font-size: var(--dsi-body-font-size); + --#{$prefix}body-line-height: var(--dsi-body-line-height); + --#{$prefix}body-font-weight: var(--dsi-body-font-weight); + --#{$prefix}lead-font-size-l: var(--dsi-lead-font-size-l); + --#{$prefix}lead-font-size: var(--dsi-lead-font-size); + --#{$prefix}lead-font-weight: var(--dsi-lead-font-weight); + --#{$prefix}lead-line-height: var(--dsi-lead-line-height); + --#{$prefix}caption-font-size: var(--dsi-caption-font-size); + --#{$prefix}caption-line-height: var(--dsi-caption-line-height); + --#{$prefix}caption-font-weight-regular: var(--dsi-caption-font-weight-regular); + --#{$prefix}caption-font-weight-semibold: var(--dsi-caption-font-weight-semibold); + --#{$prefix}icon-size-xxl: var(--dsi-icon-size-xxl); + --#{$prefix}icon-size-xl: var(--dsi-icon-size-xl); + --#{$prefix}icon-size-l: var(--dsi-icon-size-l); + --#{$prefix}icon-size-m: var(--dsi-icon-size-m); + --#{$prefix}icon-size-s: var(--dsi-icon-size-s); + --#{$prefix}border-broad: var(--dsi-border-broad); + --#{$prefix}border-thick: var(--dsi-border-thick); + --#{$prefix}border-double: var(--dsi-border-double); + --#{$prefix}border-base: var(--dsi-border-base); + --#{$prefix}radius-rounded: var(--dsi-radius-rounded); + --#{$prefix}radius-circle: var(--dsi-radius-circle); + --#{$prefix}radius-smooth: var(--dsi-radius-smooth); + --#{$prefix}sizing-full: var(--dsi-sizing-full); + --#{$prefix}sizing-two-thirds: var(--dsi-sizing-two-thirds); + --#{$prefix}sizing-half: var(--dsi-sizing-half); + --#{$prefix}sizing-quarter: var(--dsi-sizing-quarter); + --#{$prefix}shadow-l-type: var(--dsi-shadow-l-type); + --#{$prefix}shadow-l-color: var(--dsi-shadow-l-color); + --#{$prefix}shadow-l-spread: var(--dsi-shadow-l-spread); + --#{$prefix}shadow-l-blur: var(--dsi-shadow-l-blur); + --#{$prefix}shadow-l-y: var(--dsi-shadow-l-y); + --#{$prefix}shadow-l-x: var(--dsi-shadow-l-x); + --#{$prefix}shadow-m-type: var(--dsi-shadow-m-type); + --#{$prefix}shadow-m-color: var(--dsi-shadow-m-color); + --#{$prefix}shadow-m-spread: var(--dsi-shadow-m-spread); + --#{$prefix}shadow-m-blur: var(--dsi-shadow-m-blur); + --#{$prefix}shadow-m-y: var(--dsi-shadow-m-y); + --#{$prefix}shadow-m-x: var(--dsi-shadow-m-x); + --#{$prefix}shadow-s-type: var(--dsi-shadow-s-type); + --#{$prefix}shadow-s-color: var(--dsi-shadow-s-color); + --#{$prefix}shadow-s-spread: var(--dsi-shadow-s-spread); + --#{$prefix}shadow-s-blur: var(--dsi-shadow-s-blur); + --#{$prefix}shadow-s-y: var(--dsi-shadow-s-y); + --#{$prefix}shadow-s-x: var(--dsi-shadow-s-x); // text colors - --#{$prefix}color-text-accent: var(--color-text-accent); - --#{$prefix}color-text-inverse: var(--color-text-inverse); - --#{$prefix}color-text-danger-active: var(--color-text-danger-active); - --#{$prefix}color-text-danger-hover: var(--color-text-danger-hover); - --#{$prefix}color-text-danger: var(--color-text-danger); - --#{$prefix}color-text-warning-active: var(--color-text-warning-active); - --#{$prefix}color-text-warning-hover: var(--color-text-warning-hover); - --#{$prefix}color-text-warning: var(--color-text-warning); - --#{$prefix}color-text-success-active: var(--color-text-success-active); - --#{$prefix}color-text-success-hover: var(--color-text-success-hover); - --#{$prefix}color-text-success: var(--color-text-success); - --#{$prefix}color-text-disabled: var(--color-text-disabled); - --#{$prefix}color-text-muted: var(--color-text-muted); - --#{$prefix}color-text-secondary-active: var(--color-text-secondary-active); - --#{$prefix}color-text-secondary-hover: var(--color-text-secondary-hover); - --#{$prefix}color-text-secondary: var(--color-text-secondary); - --#{$prefix}color-text-primary-active: var(--color-text-primary-active); - --#{$prefix}color-text-primary-hover: var(--color-text-primary-hover); - --#{$prefix}color-text-primary: var(--color-text-primary); - --#{$prefix}color-text-base: var(--color-text-base); + --#{$prefix}color-text-accent: var(--dsi-color-text-accent); + --#{$prefix}color-text-inverse: var(--dsi-color-text-inverse); + --#{$prefix}color-text-danger-active: var(--dsi-color-text-danger-active); + --#{$prefix}color-text-danger-hover: var(--dsi-color-text-danger-hover); + --#{$prefix}color-text-danger: var(--dsi-color-text-danger); + --#{$prefix}color-text-warning-active: var(--dsi-color-text-warning-active); + --#{$prefix}color-text-warning-hover: var(--dsi-color-text-warning-hover); + --#{$prefix}color-text-warning: var(--dsi-color-text-warning); + --#{$prefix}color-text-success-active: var(--dsi-color-text-success-active); + --#{$prefix}color-text-success-hover: var(--dsi-color-text-success-hover); + --#{$prefix}color-text-success: var(--dsi-color-text-success); + --#{$prefix}color-text-disabled: var(--dsi-color-text-disabled); + --#{$prefix}color-text-muted: var(--dsi-color-text-muted); + --#{$prefix}color-text-secondary-active: var(--dsi-color-text-secondary-active); + --#{$prefix}color-text-secondary-hover: var(--dsi-color-text-secondary-hover); + --#{$prefix}color-text-secondary: var(--dsi-color-text-secondary); + --#{$prefix}color-text-primary-active: var(--dsi-color-text-primary-active); + --#{$prefix}color-text-primary-hover: var(--dsi-color-text-primary-hover); + --#{$prefix}color-text-primary: var(--dsi-color-text-primary); + --#{$prefix}color-text-base: var(--dsi-color-text-base); // border colors - --#{$prefix}color-border-danger-active: var(--color-border-danger-active); - --#{$prefix}color-border-danger-hover: var(--color-border-danger-hover); - --#{$prefix}color-border-danger: var(--color-border-danger); - --#{$prefix}color-border-warning-active: var(--color-border-warning-active); - --#{$prefix}color-border-warning-hover: var(--color-border-warning-hover); - --#{$prefix}color-border-warning: var(--color-border-warning); - --#{$prefix}color-border-success-active: var(--color-border-success-active); - --#{$prefix}color-border-success-hover: var(--color-border-success-hover); - --#{$prefix}color-border-success: var(--color-border-success); - --#{$prefix}color-border-subtle: var(--color-border-subtle); - --#{$prefix}color-border-disabled: var(--color-border-disabled); - --#{$prefix}color-border-inverse: var(--color-border-inverse); - --#{$prefix}color-border-secondary-active: var(--color-border-secondary-active); - --#{$prefix}color-border-secondary-hover: var(--color-border-secondary-hover); - --#{$prefix}color-border-secondary: var(--color-border-secondary); - --#{$prefix}color-border-primary-active: var(--color-border-primary-active); - --#{$prefix}color-border-primary-hover: var(--color-border-primary-hover); - --#{$prefix}color-border-primary: var(--color-border-primary); + --#{$prefix}color-border-danger-active: var(--dsi-color-border-danger-active); + --#{$prefix}color-border-danger-hover: var(--dsi-color-border-danger-hover); + --#{$prefix}color-border-danger: var(--dsi-color-border-danger); + --#{$prefix}color-border-warning-active: var(--dsi-color-border-warning-active); + --#{$prefix}color-border-warning-hover: var(--dsi-color-border-warning-hover); + --#{$prefix}color-border-warning: var(--dsi-color-border-warning); + --#{$prefix}color-border-success-active: var(--dsi-color-border-success-active); + --#{$prefix}color-border-success-hover: var(--dsi-color-border-success-hover); + --#{$prefix}color-border-success: var(--dsi-color-border-success); + --#{$prefix}color-border-subtle: var(--dsi-color-border-subtle); + --#{$prefix}color-border-disabled: var(--dsi-color-border-disabled); + --#{$prefix}color-border-inverse: var(--dsi-color-border-inverse); + --#{$prefix}color-border-secondary-active: var(--dsi-color-border-secondary-active); + --#{$prefix}color-border-secondary-hover: var(--dsi-color-border-secondary-hover); + --#{$prefix}color-border-secondary: var(--dsi-color-border-secondary); + --#{$prefix}color-border-primary-active: var(--dsi-color-border-primary-active); + --#{$prefix}color-border-primary-hover: var(--dsi-color-border-primary-hover); + --#{$prefix}color-border-primary: var(--dsi-color-border-primary); // background colors - --#{$prefix}color-background-primary-dark: var(--color-background-primary-dark); - --#{$prefix}color-background-primary-muted: var(--color-background-primary-muted); - --#{$prefix}color-background-danger-active: var(--color-background-danger-active); - --#{$prefix}color-background-danger-hover: var(--color-background-danger-hover); - --#{$prefix}color-background-danger-light: var(--color-background-danger-light); - --#{$prefix}color-background-danger: var(--color-background-danger); - --#{$prefix}color-background-warning-active: var(--color-background-warning-active); - --#{$prefix}color-background-warning-hover: var(--color-background-warning-hover); - --#{$prefix}color-background-warning-light: var(--color-background-warning-light); - --#{$prefix}color-background-warning: var(--color-background-warning); - --#{$prefix}color-background-success-active: var(--color-background-success-active); - --#{$prefix}color-background-success-hover: var(--color-background-success-hover); - --#{$prefix}color-background-success-light: var(--color-background-success-light); - --#{$prefix}color-background-success: var(--color-background-success); - --#{$prefix}color-background-emphasis: var(--color-background-emphasis); - --#{$prefix}color-background-subtle: var(--color-background-subtle); - --#{$prefix}color-background-disabled: var(--color-background-disabled); - --#{$prefix}color-background-inverse: var(--color-background-inverse); - --#{$prefix}color-background-muted: var(--color-background-muted); - --#{$prefix}color-background-accent-hover: var(--color-background-accent-hover); - --#{$prefix}color-background-accent: var(--color-background-accent); - --#{$prefix}color-background-secondary-lighter: var(--color-background-secondary-lighter); - --#{$prefix}color-background-secondary-light: var(--color-background-secondary-light); - --#{$prefix}color-background-secondary-active: var(--color-background-secondary-active); - --#{$prefix}color-background-secondary-hover: var(--color-background-secondary-hover); - --#{$prefix}color-background-secondary: var(--color-background-secondary); - --#{$prefix}color-background-primary-active: var(--color-background-primary-active); - --#{$prefix}color-background-primary-hover: var(--color-background-primary-hover); - --#{$prefix}color-background-primary-lighter: var(--color-background-primary-lighter); - --#{$prefix}color-background-primary-light: var(--color-background-primary-light); - --#{$prefix}color-background-primary: var(--color-background-primary); + --#{$prefix}color-background-primary-dark: var(--dsi-color-background-primary-dark); + --#{$prefix}color-background-primary-muted: var(--dsi-color-background-primary-muted); + --#{$prefix}color-background-danger-active: var(--dsi-color-background-danger-active); + --#{$prefix}color-background-danger-hover: var(--dsi-color-background-danger-hover); + --#{$prefix}color-background-danger-light: var(--dsi-color-background-danger-light); + --#{$prefix}color-background-danger: var(--dsi-color-background-danger); + --#{$prefix}color-background-warning-active: var(--dsi-color-background-warning-active); + --#{$prefix}color-background-warning-hover: var(--dsi-color-background-warning-hover); + --#{$prefix}color-background-warning-light: var(--dsi-color-background-warning-light); + --#{$prefix}color-background-warning: var(--dsi-color-background-warning); + --#{$prefix}color-background-success-active: var(--dsi-color-background-success-active); + --#{$prefix}color-background-success-hover: var(--dsi-color-background-success-hover); + --#{$prefix}color-background-success-light: var(--dsi-color-background-success-light); + --#{$prefix}color-background-success: var(--dsi-color-background-success); + --#{$prefix}color-background-emphasis: var(--dsi-color-background-emphasis); + --#{$prefix}color-background-subtle: var(--dsi-color-background-subtle); + --#{$prefix}color-background-disabled: var(--dsi-color-background-disabled); + --#{$prefix}color-background-inverse: var(--dsi-color-background-inverse); + --#{$prefix}color-background-muted: var(--dsi-color-background-muted); + --#{$prefix}color-background-accent-hover: var(--dsi-color-background-accent-hover); + --#{$prefix}color-background-accent: var(--dsi-color-background-accent); + --#{$prefix}color-background-secondary-lighter: var(--dsi-color-background-secondary-lighter); + --#{$prefix}color-background-secondary-light: var(--dsi-color-background-secondary-light); + --#{$prefix}color-background-secondary-active: var(--dsi-color-background-secondary-active); + --#{$prefix}color-background-secondary-hover: var(--dsi-color-background-secondary-hover); + --#{$prefix}color-background-secondary: var(--dsi-color-background-secondary); + --#{$prefix}color-background-primary-active: var(--dsi-color-background-primary-active); + --#{$prefix}color-background-primary-hover: var(--dsi-color-background-primary-hover); + --#{$prefix}color-background-primary-lighter: var(--dsi-color-background-primary-lighter); + --#{$prefix}color-background-primary-light: var(--dsi-color-background-primary-light); + --#{$prefix}color-background-primary: var(--dsi-color-background-primary); // status colors - reference the background category colors only - --#{$prefix}color-status-danger: var(--color-background-danger); - --#{$prefix}color-status-danger-hover: var(--color-background-danger-hover); - --#{$prefix}color-status-danger-active: var(--color-background-danger-active); - --#{$prefix}color-status-success: var(--color-background-success); - --#{$prefix}color-status-success-hover: var(--color-background-success-hover); - --#{$prefix}color-status-success-active: var(--color-background-success-active); - --#{$prefix}color-status-info: var(--color-background-info); - --#{$prefix}color-status-info-hover: var(--color-background-info-hover); - --#{$prefix}color-status-info-active: var(--color-background-info-active); - --#{$prefix}color-status-warning: var(--color-background-warning); - --#{$prefix}color-status-warning-hover: var(--color-background-warning-hover); - --#{$prefix}color-status-warning-active: var(--color-background-warning-active); + --#{$prefix}color-status-danger: var(--dsi-color-background-danger); + --#{$prefix}color-status-danger-hover: var(--dsi-color-background-danger-hover); + --#{$prefix}color-status-danger-active: var(--dsi-color-background-danger-active); + --#{$prefix}color-status-success: var(--dsi-color-background-success); + --#{$prefix}color-status-success-hover: var(--dsi-color-background-success-hover); + --#{$prefix}color-status-success-active: var(--dsi-color-background-success-active); + --#{$prefix}color-status-info: var(--dsi-color-background-info); + --#{$prefix}color-status-info-hover: var(--dsi-color-background-info-hover); + --#{$prefix}color-status-info-active: var(--dsi-color-background-info-active); + --#{$prefix}color-status-warning: var(--dsi-color-background-warning); + --#{$prefix}color-status-warning-hover: var(--dsi-color-background-warning-hover); + --#{$prefix}color-status-warning-active: var(--dsi-color-background-warning-active); // global colors - --#{$prefix}color-outline-focus: var(--color-outline-focus); - --#{$prefix}color-page-background: var(--color-background-inverse); + --#{$prefix}color-outline-focus: var(--dsi-color-outline-focus); + --#{$prefix}color-page-background: var(--dsi-color-background-inverse); // icons - --#{$prefix}icon-danger-active: var(--icon-danger-active); - --#{$prefix}icon-danger-hover: var(--icon-danger-hover); - --#{$prefix}icon-danger: var(--icon-danger); - --#{$prefix}icon-warning-active: var(--icon-warning-active); - --#{$prefix}icon-warning-hover: var(--icon-warning-hover); - --#{$prefix}icon-warning: var(--icon-warning); - --#{$prefix}icon-success-active: var(--icon-success-active); - --#{$prefix}icon-success-hover: var(--icon-success-hover); - --#{$prefix}icon-success: var(--icon-success); - --#{$prefix}icon-secondary-active: var(--icon-secondary-active); - --#{$prefix}icon-inverse: var(--icon-inverse); - --#{$prefix}icon-secondary-hover: var(--icon-secondary-hover); - --#{$prefix}icon-secondary: var(--icon-secondary); - --#{$prefix}icon-primary-active: var(--icon-primary-active); - --#{$prefix}icon-primary-hover: var(--icon-primary-hover); - --#{$prefix}icon-primary: var(--icon-primary); - --#{$prefix}icon-default: var(--icon-default); + --#{$prefix}icon-danger-active: var(--dsi-icon-danger-active); + --#{$prefix}icon-danger-hover: var(--dsi-icon-danger-hover); + --#{$prefix}icon-danger: var(--dsi-icon-danger); + --#{$prefix}icon-warning-active: var(--dsi-icon-warning-active); + --#{$prefix}icon-warning-hover: var(--dsi-icon-warning-hover); + --#{$prefix}icon-warning: var(--dsi-icon-warning); + --#{$prefix}icon-success-active: var(--dsi-icon-success-active); + --#{$prefix}icon-success-hover: var(--dsi-icon-success-hover); + --#{$prefix}icon-success: var(--dsi-icon-success); + --#{$prefix}icon-secondary-active: var(--dsi-icon-secondary-active); + --#{$prefix}icon-inverse: var(--dsi-icon-inverse); + --#{$prefix}icon-secondary-hover: var(--dsi-icon-secondary-hover); + --#{$prefix}icon-secondary: var(--dsi-icon-secondary); + --#{$prefix}icon-primary-active: var(--dsi-icon-primary-active); + --#{$prefix}icon-primary-hover: var(--dsi-icon-primary-hover); + --#{$prefix}icon-primary: var(--dsi-icon-primary); + --#{$prefix}icon-default: var(--dsi-icon-default); } From da99d5c76db4fc1662f49b218156b010c516b75b Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 3 Jan 2025 13:03:28 +0100 Subject: [PATCH 17/59] fix: restore bs variables and tokens sass import --- src/scss/base/_variables.scss | 393 ++++++++++++++++++++++++++++++---- 1 file changed, 347 insertions(+), 46 deletions(-) diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss index 71b1da1a2..cbc40196d 100644 --- a/src/scss/base/_variables.scss +++ b/src/scss/base/_variables.scss @@ -1,11 +1,41 @@ -// OLD VARIABLES ============================================================ +// Import Design Tokens Italia +@import '~design-tokens-italia/scss/dsi-tokens'; + // Color vars // HSB (https://it.wikipedia.org/wiki/Hue_Saturation_Brightness, coincidente con il modello HSV) // è lo spazio colore scelto per ottenere le varianti colore della tonalità primaria. // Color system ============================================================== -// TODO: What does this do? +$black: hsl(0, 0%, 0%) !default; +$white: hsl(0, 0%, 100%) !default; + +$gray-100: hsl(0, 0%, 96%) !default; // color-gray-96 +$gray-200: hsl(0, 0%, 90%) !default; // color-gray-90 +$gray-300: hsl(0, 0%, 83%) !default; // color-gray-83 +$gray-400: hsl(0, 0%, 64%) !default; // color-gray-64 +$gray-500: hsl(0, 0%, 45%) !default; // color-gray-45 +$gray-600: hsl(0, 0%, 32%) !default; // color-gray-32 +$gray-700: hsl(0, 0%, 25%) !default; // color-gray-25 +$gray-800: hsl(0, 0%, 15%) !default; // color-gray-15 +$gray-900: hsl(0, 0%, 10%) !default; // color-gray-10 + +$grays: () !default; +$grays: map-merge( + ( + '100': $gray-100, + '200': $gray-200, + '300': $gray-300, + '400': $gray-400, + '500': $gray-500, + '600': $gray-600, + '700': $gray-700, + '800': $gray-800, + '900': $gray-900, + ), + $grays +); + @function main($key: '80') { @return map-get($mains, $key); } @@ -15,11 +45,14 @@ $min-contrast-ratio: 4.5 !default; // Customize the light and dark text colors for use in our color contrast function. -$color-contrast-dark: var(--color-black) !default; -$color-contrast-light: var(--color-white) !default; +$color-contrast-dark: $black !default; +$color-contrast-light: $white !default; -$yiq-text-light: sassToken.$color-text-inverse !default; -$yiq-text-dark: sassToken.$color-text-base !default; +// PRIMARY COLORS DEFINITION // +$primary-h: 210 !default; +$primary-s: 100 !default; +$primary-b: 80 !default; +$primary-l: 40 !default; // Kit UI $primary: hsb($primary-h, $primary-s, $primary-b) !default; // color-blue-40 @@ -55,7 +88,7 @@ $gray-border-disabled: $gray-disabled !default; // color-border-disabled $secondary: $gray-secondary !default; -$colors: () !default; // Ensure $colors is defined +$colors: () !default; $colors: map-merge( ( 'indigo': $indigo, @@ -79,7 +112,7 @@ $colors: map-merge( ); // Border Color -// $border-color: $gray-border !default; // Replaced with --#{$prefix}-color-border +$border-color: $gray-border !default; // Info Colors $success: $green-accessible !default; @@ -87,9 +120,69 @@ $info: $secondary !default; $warning: $orange-accessible !default; $danger: $red-accessible !default; +$theme-colors: () !default; +$theme-colors: map-merge( + ( + 'primary': $primary, + 'secondary': $secondary, + 'success': $success, + 'info': $info, + 'warning': $warning, + 'danger': $danger, + 'light': $light, + 'dark': $dark, + 'black': $black, + 'white': $white, + '100': $gray-100, + '200': $gray-200, + '300': $gray-300, + '400': $gray-400, + '500': $gray-500, + '600': $gray-600, + '700': $gray-700, + '800': $gray-800, + '900': $gray-900, + ), + $theme-colors +); + // Characters which are escaped by the escape-svg function $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default; +// ACCENT COLORS DEFINITIONS +// analoghi +$analogue-1-h: 243; +$analogue-1-s: 85; +$analogue-1-b: 100; +$analogue-1: hsb($analogue-1-h, $analogue-1-s, $analogue-1-b) !default; +$analogue-2-h: 178; +$analogue-2-s: 95; +$analogue-2-b: 85; +$analogue-2: hsb($analogue-2-h, $analogue-2-s, $analogue-2-b) !default; +// Complementari e triadici +$complementary-1-h: 351; +$complementary-1-s: 75; +$complementary-1-b: 97; +$complementary-1: hsb($complementary-1-h, $complementary-1-s, $complementary-1-b) !default; +$complementary-2-h: 36; +$complementary-2-s: 100; +$complementary-2-b: 100; +$complementary-2: hsb($complementary-2-h, $complementary-2-s, $complementary-2-b) !default; +$complementary-3-h: 159; +$complementary-3-s: 100; +$complementary-3-b: 81; +$complementary-3: hsb($complementary-3-h, $complementary-3-s, $complementary-3-b) !default; + +// NEUTRAL COLORS DEFINITIONS +$neutral-1-h: 210; +$neutral-1-s: 70; +$neutral-1-b: 30; +$neutral-1: hsb($neutral-1-h, $neutral-1-s, $neutral-1-b) !default; +$neutral-2-h: 210; +$neutral-2-s: 5; +$neutral-2-b: 95; +$neutral-2: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b) !default; + // Light Greys A $lightgrey-a1: hsl(210, 3%, 85%); // progress-background-default $lightgrey-a2: #edf5fc; @@ -106,6 +199,214 @@ $lightgrey-b4: #f2f6fa; $lightgrey-c1: #f7f9fa; $lightgrey-c2: hsl(210, 62%, 97%); // color-background-primary-lighter; +//*********************************************************************** +//********************Primary color variations*************************** +//*********************************************************************** + +//-------------------------Tinta e ombre--------------------------------- +$primary-a12: hsb($primary-h, $primary-s, 20) !default; +$primary-a11: hsb($primary-h, $primary-s, 30) !default; +$primary-a10: hsb($primary-h, $primary-s, 40) !default; +$primary-a9: hsb($primary-h, $primary-s, 50) !default; +$primary-a8: hsb($primary-h, $primary-s, 60) !default; +$primary-a7: hsb($primary-h, $primary-s, 70) !default; +$primary-a6: hsb($primary-h, $primary-s, 80) !default; +$primary-a5: hsb($primary-h, $primary-s - 15, 84) !default; +$primary-a4: hsb($primary-h, $primary-s - 30, 88) !default; +$primary-a3: hsb($primary-h, $primary-s - 45, 92) !default; +$primary-a2: hsb($primary-h + 1, $primary-s - 60, 96) !default; +$primary-a1: hsb($primary-h, $primary-s - 75, 99) !default; + +//-------------------------Toni------------------------------------------ +$primary-b1: hsb($primary-h, $primary-s, $primary-b) !default; +$primary-b2: hsb($primary-h, $primary-s - 10, $primary-b - 10) !default; +$primary-b3: hsb($primary-h, $primary-s - 20, $primary-b - 20) !default; +$primary-b4: hsb($primary-h, $primary-s - 30, $primary-b - 30) !default; +$primary-b5: hsb($primary-h, $primary-s - 40, $primary-b - 40) !default; +$primary-b6: hsb($primary-h, $primary-s - 50, $primary-b - 50) !default; +$primary-b7: hsb($primary-h, $primary-s - 60, $primary-b - 60) !default; +$primary-b8: hsb($primary-h, $primary-s - 70, $primary-b - 70) !default; + +//-------------------------Saturazione------------------------------------------ +$primary-c1: hsb($primary-h, $primary-s - calc($primary-s * 90 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; +$primary-c2: hsb($primary-h, $primary-s - calc($primary-s * 80 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; +$primary-c3: hsb($primary-h, $primary-s - calc($primary-s * 70 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; +$primary-c4: hsb($primary-h, $primary-s - calc($primary-s * 60 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; +$primary-c5: hsb($primary-h, $primary-s - calc($primary-s * 50 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; +$primary-c6: hsb($primary-h, $primary-s - calc($primary-s * 40 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; +$primary-c7: hsb($primary-h, $primary-s - calc($primary-s * 30 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; +$primary-c8: hsb($primary-h, $primary-s - calc($primary-s * 20 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; +$primary-c9: hsb($primary-h, $primary-s - calc($primary-s * 10 / 100), $primary-b + calc($primary-b * 20 / 100)) !default; +$primary-c10: hsb($primary-h, $primary-s, $primary-b + calc($primary-b * 20 / 100)) !default; +$primary-c11: hsb($primary-h, $primary-s, $primary-b + calc($primary-b * 10 / 100)) !default; +$primary-c12: hsb($primary-h, $primary-s, $primary-b) !default; + +//*********************************************************************** +//********************Accent colors variations*************************** +//*********************************************************************** +// analoghi +// tinte e ombre +/***************************** 1 ****************************************/ +$analogue-1-a12: hsb($analogue-1-h, $analogue-1-s, 20) !default; +$analogue-1-a11: hsb($analogue-1-h, $analogue-1-s, 30) !default; +$analogue-1-a10: hsb($analogue-1-h, $analogue-1-s, 40) !default; +$analogue-1-a9: hsb($analogue-1-h, $analogue-1-s, 50) !default; +$analogue-1-a8: hsb($analogue-1-h, $analogue-1-s, 60) !default; +$analogue-1-a7: hsb($analogue-1-h, $analogue-1-s, 70) !default; +$analogue-1-a6: hsb($analogue-1-h, $analogue-1-s, 80) !default; +$analogue-1-a5: hsb($analogue-1-h, $analogue-1-s - 15, 84) !default; +$analogue-1-a4: hsb($analogue-1-h, $analogue-1-s - 30, 88) !default; +$analogue-1-a3: hsb($analogue-1-h, $analogue-1-s - 45, 92) !default; +$analogue-1-a2: hsb($analogue-1-h, $analogue-1-s - 60, 96) !default; +$analogue-1-a1: hsb($analogue-1-h, $analogue-1-s - 75, 100) !default; + +/***************************** 2 ****************************************/ +$analogue-2-a12: hsb($analogue-2-h, $analogue-2-s, 20) !default; +$analogue-2-a11: hsb($analogue-2-h, $analogue-2-s, 30) !default; +$analogue-2-a10: hsb($analogue-2-h, $analogue-2-s, 40) !default; +$analogue-2-a9: hsb($analogue-2-h, $analogue-2-s, 50) !default; +$analogue-2-a8: hsb($analogue-2-h, $analogue-2-s, 60) !default; +$analogue-2-a7: hsb($analogue-2-h, $analogue-2-s, 70) !default; +$analogue-2-a6: hsb($analogue-2-h, $analogue-2-s, 80) !default; +$analogue-2-a5: hsb($analogue-2-h, $analogue-2-s - 15, 84) !default; +$analogue-2-a4: hsb($analogue-2-h, $analogue-2-s - 30, 88) !default; +$analogue-2-a3: hsb($analogue-2-h, $analogue-2-s - 45, 92) !default; +$analogue-2-a2: hsb($analogue-2-h, $analogue-2-s - 60, 96) !default; +$analogue-2-a1: hsb($analogue-2-h, $analogue-2-s - 75, 100) !default; + +// toni +/***************************** 1 ****************************************/ +$analogue-1-b1: hsb($analogue-1-h, $analogue-1-s, $analogue-1-b) !default; +$analogue-1-b2: hsb($analogue-1-h, $analogue-1-s - 10, $analogue-1-b - 10) !default; +$analogue-1-b3: hsb($analogue-1-h, $analogue-1-s - 20, $analogue-1-b - 20) !default; +$analogue-1-b4: hsb($analogue-1-h, $analogue-1-s - 30, $analogue-1-b - 30) !default; +$analogue-1-b5: hsb($analogue-1-h, $analogue-1-s - 40, $analogue-1-b - 40) !default; +$analogue-1-b6: hsb($analogue-1-h, $analogue-1-s - 50, $analogue-1-b - 50) !default; +$analogue-1-b7: hsb($analogue-1-h, $analogue-1-s - 60, $analogue-1-b - 60) !default; +$analogue-1-b8: hsb($analogue-1-h, $analogue-1-s - 70, $analogue-1-b - 70) !default; + +/***************************** 2 ****************************************/ +$analogue-2-b1: hsb($analogue-2-h, $analogue-2-s, $analogue-2-b) !default; +$analogue-2-b2: hsb($analogue-2-h, $analogue-2-s - 10, $analogue-2-b - 10) !default; +$analogue-2-b3: hsb($analogue-2-h, $analogue-2-s - 20, $analogue-2-b - 20) !default; +$analogue-2-b4: hsb($analogue-2-h, $analogue-2-s - 30, $analogue-2-b - 30) !default; +$analogue-2-b5: hsb($analogue-2-h, $analogue-2-s - 40, $analogue-2-b - 40) !default; +$analogue-2-b6: hsb($analogue-2-h, $analogue-2-s - 50, $analogue-2-b - 50) !default; +$analogue-2-b7: hsb($analogue-2-h, $analogue-2-s - 60, $analogue-2-b - 60) !default; +$analogue-2-b8: hsb($analogue-2-h, $analogue-2-s - 70, $analogue-2-b - 70) !default; + +// complementari +// tinte e ombre +/***************************** 1 ****************************************/ +$complementary-1-a12: hsb($complementary-1-h, $complementary-1-s, 20) !default; +$complementary-1-a11: hsb($complementary-1-h, $complementary-1-s, 30) !default; +$complementary-1-a10: hsb($complementary-1-h, $complementary-1-s, 40) !default; +$complementary-1-a9: hsb($complementary-1-h, $complementary-1-s, 50) !default; +$complementary-1-a8: hsb($complementary-1-h, $complementary-1-s, 60) !default; +$complementary-1-a7: hsb($complementary-1-h, $complementary-1-s, 70) !default; +$complementary-1-a6: hsb($complementary-1-h, $complementary-1-s, 80) !default; +$complementary-1-a5: hsb($complementary-1-h, $complementary-1-s - 15, 84) !default; +$complementary-1-a4: hsb($complementary-1-h, $complementary-1-s - 30, 88) !default; +$complementary-1-a3: hsb($complementary-1-h, $complementary-1-s - 45, 92) !default; +$complementary-1-a2: hsb($complementary-1-h, $complementary-1-s - 60, 96) !default; +$complementary-1-a1: hsb($complementary-1-h, $complementary-1-s - 75, 100) !default; + +/***************************** 2 ****************************************/ +$complementary-2-a12: hsb($complementary-2-h, $complementary-2-s, 20) !default; +$complementary-2-a11: hsb($complementary-2-h, $complementary-2-s, 30) !default; +$complementary-2-a10: hsb($complementary-2-h, $complementary-2-s, 40) !default; +$complementary-2-a9: hsb($complementary-2-h, $complementary-2-s, 50) !default; +$complementary-2-a8: hsb($complementary-2-h, $complementary-2-s, 60) !default; +$complementary-2-a7: hsb($complementary-2-h, $complementary-2-s, 70) !default; +$complementary-2-a6: hsb($complementary-2-h, $complementary-2-s, 80) !default; +$complementary-2-a5: hsb($complementary-2-h, $complementary-2-s - 15, 84) !default; +$complementary-2-a4: hsb($complementary-2-h, $complementary-2-s - 30, 88) !default; +$complementary-2-a3: hsb($complementary-2-h, $complementary-2-s - 45, 92) !default; +$complementary-2-a2: hsb($complementary-2-h, $complementary-2-s - 60, 96) !default; +$complementary-2-a1: hsb($complementary-2-h, $complementary-2-s - 75, 100) !default; + +/***************************** 3 ****************************************/ +$complementary-3-a12: hsb($complementary-3-h, $complementary-3-s, 20) !default; +$complementary-3-a11: hsb($complementary-3-h, $complementary-3-s, 30) !default; +$complementary-3-a10: hsb($complementary-3-h, $complementary-3-s, 40) !default; +$complementary-3-a9: hsb($complementary-3-h, $complementary-3-s, 50) !default; +$complementary-3-a8: hsb($complementary-3-h, $complementary-3-s, 60) !default; +$complementary-3-a7: hsb($complementary-3-h, $complementary-3-s, 70) !default; +$complementary-3-a6: hsb($complementary-3-h, $complementary-3-s, 80) !default; +$complementary-3-a5: hsb($complementary-3-h, $complementary-3-s - 15, 84) !default; +$complementary-3-a4: hsb($complementary-3-h, $complementary-3-s - 30, 88) !default; +$complementary-3-a3: hsb($complementary-3-h, $complementary-3-s - 45, 92) !default; +$complementary-3-a2: hsb($complementary-3-h, $complementary-3-s - 60, 96) !default; +$complementary-3-a1: hsb($complementary-3-h, $complementary-3-s - 75, 100) !default; + +//-------------------------- toni ----------------------------------------- +/***************************** 1 ****************************************/ +$complementary-1-b1: hsb($complementary-1-h, $complementary-1-s, $complementary-1-b) !default; +$complementary-1-b2: hsb($complementary-1-h, $complementary-1-s - 10, $complementary-1-b - 10) !default; +$complementary-1-b3: hsb($complementary-1-h, $complementary-1-s - 20, $complementary-1-b - 20) !default; +$complementary-1-b4: hsb($complementary-1-h, $complementary-1-s - 30, $complementary-1-b - 30) !default; +$complementary-1-b5: hsb($complementary-1-h, $complementary-1-s - 40, $complementary-1-b - 40) !default; +$complementary-1-b6: hsb($complementary-1-h, $complementary-1-s - 50, $complementary-1-b - 50) !default; +$complementary-1-b7: hsb($complementary-1-h, $complementary-1-s - 60, $complementary-1-b - 60) !default; +$complementary-1-b8: hsb($complementary-1-h, $complementary-1-s - 70, $complementary-1-b - 70) !default; + +/***************************** 2 ****************************************/ +$complementary-2-b1: hsb($complementary-2-h, $complementary-2-s, $complementary-2-b) !default; +$complementary-2-b2: hsb($complementary-2-h, $complementary-2-s - 10, $complementary-2-b - 10) !default; +$complementary-2-b3: hsb($complementary-2-h, $complementary-2-s - 20, $complementary-2-b - 20) !default; +$complementary-2-b4: hsb($complementary-2-h, $complementary-2-s - 30, $complementary-2-b - 30) !default; +$complementary-2-b5: hsb($complementary-2-h, $complementary-2-s - 40, $complementary-2-b - 40) !default; +$complementary-2-b6: hsb($complementary-2-h, $complementary-2-s - 50, $complementary-2-b - 50) !default; +$complementary-2-b7: hsb($complementary-2-h, $complementary-2-s - 60, $complementary-2-b - 60) !default; +$complementary-2-b8: hsb($complementary-2-h, $complementary-2-s - 70, $complementary-2-b - 70) !default; + +/***************************** 3 ****************************************/ +$complementary-3-b1: hsb($complementary-3-h, $complementary-3-s, $complementary-3-b) !default; +$complementary-3-b2: hsb($complementary-3-h, $complementary-3-s - 10, $complementary-3-b - 10) !default; +$complementary-3-b3: hsb($complementary-3-h, $complementary-3-s - 20, $complementary-3-b - 20) !default; +$complementary-3-b4: hsb($complementary-3-h, $complementary-3-s - 30, $complementary-3-b - 30) !default; +$complementary-3-b5: hsb($complementary-3-h, $complementary-3-s - 40, $complementary-3-b - 40) !default; +$complementary-3-b6: hsb($complementary-3-h, $complementary-3-s - 50, $complementary-3-b - 50) !default; +$complementary-3-b7: hsb($complementary-3-h, $complementary-3-s - 60, $complementary-3-b - 60) !default; +$complementary-3-b8: hsb($complementary-3-h, $complementary-3-s - 70, $complementary-3-b - 70) !default; + +//*********************************************************************** +//********************Neutral color variations*************************** +//*********************************************************************** + +// tinte e ombre +/***************************** NEUTRAL 1 ****************************************/ +$neutral-1-a10: hsb($neutral-1-h, $neutral-1-s, $neutral-1-b) !default; +$neutral-1-a9: hsb($neutral-1-h, $neutral-1-s - 20, $neutral-1-b + 7) !default; +$neutral-1-a8: hsb($neutral-1-h, $neutral-1-s - 30, $neutral-1-b + 14) !default; +$neutral-1-a7: hsb($neutral-1-h, $neutral-1-s - 40, $neutral-1-b + 21) !default; +$neutral-1-a6: hsb($neutral-1-h, $neutral-1-s - 50, $neutral-1-b + 28) !default; +$neutral-1-a5: hsb($neutral-1-h, $neutral-1-s - 60, $neutral-1-b + 35) !default; +$neutral-1-a4: hsb($neutral-1-h, $neutral-1-s - 64, $neutral-1-b + 42) !default; +$neutral-1-a3: hsb($neutral-1-h, $neutral-1-s - 68, $neutral-1-b + 49) !default; +$neutral-1-a2: hsb($neutral-1-h, $neutral-1-s - 71, $neutral-1-b + 56) !default; +$neutral-1-a1: hsb($neutral-1-h, $neutral-1-s - 73, $neutral-1-b + 63) !default; + +/***************************** NEUTRAL 2 ****************************************/ +$neutral-2-b1: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b) !default; +$neutral-2-b2: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b - 15) !default; +$neutral-2-b3: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b - 30) !default; +$neutral-2-b4: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b - 45) !default; +$neutral-2-b5: hsb($neutral-2-h, $neutral-2-s - 1, $neutral-2-b - 60) !default; +$neutral-2-b6: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 75) !default; +$neutral-2-b7: hsb($neutral-2-h, $neutral-2-s + 4, $neutral-2-b - 90) !default; + +/***************************** NEUTRAL 2 / 3 ****************************************/ +$neutral-2-a1: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b) !default; +$neutral-2-a2: hsb($neutral-2-h, $neutral-2-s + 3, $neutral-2-b - 15) !default; +$neutral-2-a3: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 30) !default; +$neutral-2-a4: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 45) !default; +$neutral-2-a5: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 60) !default; +$neutral-2-a6: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 75) !default; +$neutral-2-a7: hsb($neutral-2-h, $neutral-2-s + 4, $neutral-2-b - 85) !default; + +//==================== DESIGN TOKENS VARIABLES ============================// + // SEMANTIC TOKENS ========================================================= // Backgrounds @@ -164,7 +465,7 @@ $enable-deprecation-messages: true !default; $enable-important-utilities: true !default; // Prefix for :root CSS variables -$prefix: bsi- !default; +$prefix: bs- !default; // Spacing // @@ -192,7 +493,7 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default; // scss-docs-end box-shadow-variables $component-active-color: $white !default; -$component-active-bg: var(--#{$prefix}-primary) !default; +$component-active-bg: $primary !default; $caret-width: 0.3em !default; $caret-vertical-align: $caret-width * 0.85 !default; @@ -245,6 +546,7 @@ $border-widths: ( ) !default; $border-style: solid !default; +$border-color-translucent: rgba($black, 0.175) !default; // Typography @@ -410,7 +712,7 @@ $focus-outline-color-out: $black !default; $focus-outline-color: $focus-outline-color-out !default; // xxx retro-compatibility, ex $orange //skiplinks -$skiplinks-color: var(--#{$prefix}-primary) !default; +$skiplinks-color: $primary !default; $skiplinks-bg: $color-background-primary-lighter !default; // Input @@ -833,7 +1135,7 @@ $progress-font-size: $font-size-base * 0.75 !default; $progress-bg: $gray-200 !default; $progress-box-shadow: $box-shadow-inset !default; $progress-bar-color: $white !default; -$progress-bar-bg: var(--#{$prefix}-primary) !default; +$progress-bar-bg: $primary !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width 0.6s ease !default; @@ -856,9 +1158,9 @@ $zindex-toast: 1090 !default; // scss-docs-end zindex-stack // Link and button colors -$btn-primary-bg: var(--#{$prefix}-primary) !default; -$btn-primary-border: var(--#{$prefix}-primary) !default; -$link-color: var(--#{$prefix}-primary) !default; +$btn-primary-bg: $primary !default; +$btn-primary-border: $primary !default; +$link-color: $primary !default; $link-shade-percentage: 20% !default; $link-hover-color: shift-color($link-color, $link-shade-percentage) !default; $link-hover-decoration: null !default; @@ -1151,7 +1453,7 @@ $list-group-active-border-color: $list-group-active-bg !default; $list-group-disabled-color: $gray-600 !default; $list-group-disabled-bg: $list-group-bg !default; -$list-group-action-color: var(--#{$prefix}-primary) !default; +$list-group-action-color: $primary !default; $list-group-action-hover-color: $list-group-action-color !default; $list-group-action-active-color: $body-color !default; @@ -1224,7 +1526,7 @@ $dropdown-link-active-bg: $component-active-bg !default; // Dropdown custom $dropdown-custom-button-padding: 0 4px; -$dropdown-custom-button-color: var(--#{$prefix}-primary) !default; +$dropdown-custom-button-color: $primary !default; $dropdown-custom-button-background: transparent !default; $dropdown-custom-button-caret-font-size: 0.5rem; $dropdown-custom-button-caret-distance: $v-gap; @@ -1280,7 +1582,7 @@ $nav-pills-link-active-bg: $component-active-bg !default; //Navigation -$navbar-bg-color: var(--#{$prefix}-primary) !default; +$navbar-bg-color: $primary !default; $navbar-brand-font-size: 1rem !default; $navbar-toggler-border-radius: 0 !default; $navbar-dark-toggler-icon-bg: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkuMnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMiAxMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSIxMDI0dXAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSItLWhvbWUtLS1wYXJhbGxheC0tLW1vYmlsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI0LjAwMDAwMCwgLTIwLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0iLW5ldHdvcmstc2xpbS1oZWFkZXIiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTI0LDI0IEwzNiwyNCBMMzYsMjYgTDI0LDI2IEwyNCwyNCBaIE0yNCwyMCBMMzIsMjAgTDMyLDIyIEwyNCwyMiBMMjQsMjAgWiBNMjQsMjggTDMyLDI4IEwzMiwzMCBMMjQsMzAgTDI0LDI4IFoiIGlkPSJpY29uLXNtYWxsLWJ1cmdlciI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=') !default; @@ -1322,20 +1624,20 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; // scss-docs-end navbar-dark-variables $navigation-bg-color: $white !default; -$navigation-bg-color-desktop: var(--#{$prefix}-primary) !default; +$navigation-bg-color-desktop: $primary !default; $navigation-h-padding: 24px; $navigation-v-padding: 13px; $navigation-sidebar-bg-color-mobile: rgba(0, 0, 0, 0.6) !default; $navigation-close-button-size: 44px !default; -$navigation-close-button-text-color: var(--#{$prefix}-primary) !default; +$navigation-close-button-text-color: $primary !default; $navigation-close-button-text-size: 0.75rem; $navigation-close-button-icon-size: 2rem; $navigation-links-margin-top: 102px; -$navigation-link-color: var(--#{$prefix}-primary) !default; +$navigation-link-color: $primary !default; $navigation-link-color-desk: $white !default; $navigation-link-active-bar-size: 3px; -$navigation-link-active-bar-color: var(--#{$prefix}-primary) !default; +$navigation-link-active-bar-color: $primary !default; $navigation-link-active-bar-color-desk: $white !default; $navigation-toggle-button-icon-color: $white !default; $navigation-toggle-button-icon-size: 1.5rem; @@ -1347,14 +1649,14 @@ $navigation-disabled-item-mobile-opacity: 0.6 !default; $navigation-hamburger-size: 24px; // navigation dark theme (mobile) -$navigation-dark-bg-color: var(--#{$prefix}-primary) !default; // missing in UI kit +$navigation-dark-bg-color: $primary !default; // missing in UI kit $navigation-dark-text-color: $white !default; // missing in UI kit $navigation-dark-bg-color: $primary-b1 !default; // missing in UI kit $navigation-dark-separator-color: $primary-c5 !default; // missing in UI kit // navigation light theme (desktop) $navigation-light-bg-color: $white !default; -$navigation-light-text-color: var(--#{$prefix}-primary) !default; +$navigation-light-text-color: $primary !default; $navigation-light-separator-color: $neutral-1-a2 !default; $navigation-light-megamenu-separator-color: $gray-border !default; // UI kit @@ -1405,13 +1707,13 @@ $pager-item-size-mobile: 2.5rem; // 40px $pager-item-size-tablet: 3rem; // 48px $pager-item-border-radius: 4px; $pager-item-margin-right: 5px; -$pager-item-current-color: var(--#{$prefix}-primary) !default; -$pager-item-current-border: 1px solid var(--#{$prefix}-primary) !default; +$pager-item-current-color: $primary !default; +$pager-item-current-border: 1px solid $primary !default; $pager-font-size: 1rem; $pager-font-weight: 700; $pager-font-color: $secondary !default; -$pager-hover-color: var(--#{$prefix}-primary) !default; -$pager-icon-color: var(--#{$prefix}-primary) !default; +$pager-hover-color: $primary !default; +$pager-icon-color: $primary !default; $pager-icon-size: 1rem; $pager-disabled-color: $gray-label-disabled !default; $pager-jump-to-width: 4.5rem; @@ -1431,7 +1733,7 @@ $sidebar-link-small-line-width: 65px; $sidebar-link-size: 1rem; $sidebar-dropdown-icon-size: 1.5rem; $sidebar-dropdown-line-selection-width: 2px; -$sidebar-dropdown-line-selection-color: var(--#{$prefix}-primary) !default; +$sidebar-dropdown-line-selection-color: $primary !default; $sidebar-submenu-font-size: 1rem; $sidebar-submenu-link-v-padding: 0.45em; $sidebar-border-color: $gray-border !default; @@ -1443,7 +1745,7 @@ $sidebar-dark-separator-color: rgba(229, 229, 229, 0.3) !default; // Missing in // Navscroll $navscroll-bg-color: $white !default; -$navscroll-toggler-color: var(--#{$prefix}-primary) !default; +$navscroll-toggler-color: $primary !default; $navscroll-button-text-weight: 600; $navscroll-top-box-shadow: 0 0px 30px 5px rgba(0, 0, 0, 0.05) !default; $navscroll-bottom-box-shadow: 0 0px 30px 5px rgba(0, 0, 0, 0.05) !default; @@ -1469,7 +1771,7 @@ $modal-padding: $v-gap * 3; $modal-margin: $v-gap * 6; $modal-padding-close: $v-gap * 2; $modal-heading-color: $color-text-base !default; // UI kit -$modal-icon-color: var(--#{$prefix}-primary) !default; +$modal-icon-color: $primary !default; $modal-icon-distance: $v-gap * 2; $modal-alert-p-distance: 32px + $v-gap * 2; $modal-heading-border: 1px solid $color-border-subtle !default; @@ -1501,12 +1803,12 @@ $header-slim-h-padding: 18px; $header-slim-v-padding-mob: 6.5px; // Header Slim theme light $header-slim-theme-light-bg-color: $white !default; -$header-slim-theme-light-text-color: var(--#{$prefix}-primary) !default; -$header-slim-theme-light-button-color: var(--#{$prefix}-primary) !default; -$header-slim-theme-light-button-hover-color: var(--#{$prefix}-primary) !default; +$header-slim-theme-light-text-color: $primary !default; +$header-slim-theme-light-button-color: $primary !default; +$header-slim-theme-light-button-hover-color: $primary !default; // Header Center -$header-center-bg-color: var(--#{$prefix}-primary) !default; +$header-center-bg-color: $primary !default; $header-center-text-color: $white !default; $header-center-max-height: 120px; $header-center-max-height-mob: 80px; @@ -1536,7 +1838,7 @@ $header-center-small-h2-size: 1.25rem; $header-center-small-h3-size: 0.75rem; // Header Center theme light $header-center-theme-light-bg-color: $white !default; -$header-center-theme-light-text-color: var(--#{$prefix}-primary) !default; +$header-center-theme-light-text-color: $primary !default; // Anchors vertical offset: $anchor-v-offset-lg: 72px; @@ -1563,7 +1865,7 @@ $card-category-m-bottom: $v-gap * 2; $card-big-head-size: 1.5rem; $card-big-head-l-h: 1.75rem; $card-signature-size: 0.875rem; -$card-link-color: var(--#{$prefix}-primary) !default; +$card-link-color: $primary !default; $card-link-icon-size: $v-gap * 2; $card-cat-icon-block-margin: $v-gap * 2; $card-cat-icon-size: $v-gap * 5; @@ -1579,7 +1881,7 @@ $card-img-heading-size: 1.1111111111111112rem; // FIXME $card-img-heading-l-h: 1.5555555555555556rem; $special-card-img-width: 174px; // flag icon -$flag-icon-color: var(--#{$prefix}-primary) !default; +$flag-icon-color: $primary !default; $flag-icon-h: $v-gap * 6; $flag-icon-w: $v-gap * 4; // tag @@ -1594,7 +1896,7 @@ $select-button-padding: $v-gap !default; $select-button-text-size: 1rem; $select-dd-shadow: $dialog-shadow !default; $select-dd-text-size: 1rem; -$select-dd-link-color: var(--#{$prefix}-primary) !default; +$select-dd-link-color: $primary !default; $select-dd-link-color-active: $color-text-primary-active !default; // UI kit $select-dd-small-separator-width: 65px; $select-dd-small-separator-bg: $gray-border !default; // UI kit @@ -1618,7 +1920,7 @@ $dp-grid-size: 0.75rem; $dp-current-size: $v-gap * 4; //hero -$hero-bg-color: var(--#{$prefix}-primary) !default; +$hero-bg-color: $primary !default; $hero-height-desk: 620px; $hero-height-mob: 380px; $hero-height-sm-desk: 400px; @@ -1817,16 +2119,15 @@ $offcanvas-color: $modal-content-color !default; $offcanvas-box-shadow: $modal-content-box-shadow-xs !default; $offcanvas-backdrop-bg: $modal-backdrop-bg !default; $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; - // ============================================================ // NEW VARIABLES -// Variables used in _maps.scss +// Variables used in _maps.scss inside the $status map $color-theme-primary: var(--#{$prefix}theme-primary); -$color-status-info: var(---#{$prefix}color-background-secondary); -$color-status-success: var(---#{$prefix}color-status-success); -$color-status-warning: var(---#{$prefix}color-status-warning); -$color-status-danger: var(---#{$prefix}color-status-danger); +$color-status-info: var(--#{$prefix}color-background-secondary); +$color-status-success: var(--#{$prefix}color-status-success); +$color-status-warning: var(--#{$prefix}color-status-warning); +$color-status-danger: var(--#{$prefix}color-status-danger); From 7062e957301fa1c400b06dae0b027fbbec129c1b Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 3 Jan 2025 15:18:11 +0100 Subject: [PATCH 18/59] refactor: component acceptoverlay --- src/scss/components/_accept-overlay.scss | 115 ++++++++++++----------- 1 file changed, 62 insertions(+), 53 deletions(-) diff --git a/src/scss/components/_accept-overlay.scss b/src/scss/components/_accept-overlay.scss index 73e308c88..cd69e4d3a 100644 --- a/src/scss/components/_accept-overlay.scss +++ b/src/scss/components/_accept-overlay.scss @@ -1,31 +1,43 @@ -//mobile - -.acceptoverlayable { - position: relative; - &.show { - min-height: 450px; - } -} - .acceptoverlay { - display: flex; - background-color: $color-background-emphasis; - opacity: 0.92; + --#{$prefix}acceptoverlay-color-background: var(--#{$prefix}color-background-inverse); + --#{$prefix}acceptoverlay-color-text: var(--#{$prefix}color-text); + --#{$prefix}acceptoverlay-label-color: var(--#{$prefix}color-text-secondary); + --#{$prefix}acceptoverlay-label-border-color: var(--#{$prefix}color-border-subtle); + --#{$prefix}acceptoverlay-opacity: 0.9; + --#{$prefix}acceptoverlay-spacing-inset: var(--#{$prefix}spacing-inset-s); + --#{$prefix}acceptoverlay-primary-opacity: 0.95; + --#{$prefix}acceptoverlay-inner-width: 600px; + --#{$prefix}acceptoverlay-icon-spacing: var(--#{$prefix}spacing-stack-s); + --#{$prefix}acceptoverlay-icon-fill: var(--#{$prefix}icon-primary); + --#{$prefix}acceptoverlay-buttons-spacing: var(--#{$prefix}spacing-stack-s); + --#{$prefix}acceptoverlay-buttons-last-child-margin-top: ; position: absolute; top: 0; + right: 0; bottom: 0; left: 0; - right: 0; z-index: 1; - padding: $v-gap * 4; - justify-content: center; + + display: flex; flex-wrap: wrap; align-items: flex-start; + justify-content: center; + padding: var(--#{$prefix}acceptoverlay-spacing-inset); + opacity: var(--#{$prefix}acceptoverlay-opacity); + background-color: var(--#{$prefix}acceptoverlay-background-color); + // Change spacing on medium devices + @include media-breakpoint-up(md) { + --#{$prefix}acceptoverlay-spacing-inset: var(--#{$prefix}spacing-inset-m); + } + // Change alignment on large devices + @include media-breakpoint-up(lg) { + align-items: center; + } label { - color: $white; + color: var(--#{$prefix}acceptoverlay-label-color); &::after { - border-color: $white !important; + border-color: var(--#{$prefix}acceptoverlay-label-border-color) !important; } } @@ -34,9 +46,9 @@ } &.acceptoverlay-primary { - background-color: $primary; + --#{$prefix}acceptoverlay-background-color: var(--#{$prefix}color-background-primary); &.show { - opacity: 0.97; + opacity: var(--#{$prefix}acceptoverlay-primary-opacity); } } @@ -47,46 +59,49 @@ h5, h6, p { - color: $white; margin-bottom: 0; + color: var(--#{$prefix}acceptoverlay-color-text); } h4 { text-align: center; - font-size: 2.25rem; } p { text-align: justify; - font-family: $font-family-serif; - font-size: 1rem; } .acceptoverlay-inner { width: 100%; - max-width: 480px; + max-width: var(--#{$prefix}acceptoverlay-inner-width); } .acceptoverlay-icon { + margin-bottom: var(--#{$prefix}acceptoverlay-icon-spacing); text-align: center; - margin-bottom: $v-gap * 3; + @include media-breakpoint-up(md) { + --#{$prefix}acceptoverlay-icon-margin-bottom: var(--dsi-spacing-12x); // TODO: apply semantic token + } + .icon { - fill: $white; + fill: var(--#{$prefix}acceptoverlay-icon-fill); } } .acceptoverlay-buttons { - background-color: transparent !important; - margin-top: $v-gap * 4; display: flex; - justify-content: space-between; flex-wrap: wrap; + justify-content: space-between; + margin-top: var(--#{$prefix}acceptoverlay-buttons-spacing); + background-color: transparent !important; + button { width: 100%; &:last-child { - margin-top: $v-gap * 2; + --#{$prefix}acceptoverlay-buttons-spacing: var(--#{$prefix}spacing-stack-xs); } } + &.single-button { button { margin-top: 0; @@ -96,35 +111,29 @@ } //Tablet vertical @include media-breakpoint-up(md) { - .acceptoverlay { - padding: $v-gap * 3; - .acceptoverlay-icon { - margin-bottom: $v-gap * 6; + .acceptoverlay-buttons { + flex-wrap: nowrap; + button { + width: 50%; + margin-top: 0 !important; + &:last-child { + margin-left: var(--#{$prefix}spacing-inline-m); + } } - .acceptoverlay-buttons { - flex-wrap: nowrap; + &.single-button { + //text-align: center; button { - width: 50%; - margin-top: 0 !important; - &:last-child { - margin-left: $v-gap * 3; - } - } - &.single-button { - //text-align: center; - button { - width: auto; - min-width: 50%; - margin: 0 auto; - } + width: auto; + min-width: 50%; + margin: 0 auto; } } } } -//Tablet horizontal / small desktop -@include media-breakpoint-up(lg) { - .acceptoverlay { - align-items: center; +.acceptoverlayable { + position: relative; + &.show { + min-height: 450px; } } From 0d5c5f22a8d429c47be6dca9ea5f163232f29de3 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 3 Jan 2025 15:19:34 +0100 Subject: [PATCH 19/59] refactor: component alert --- src/scss/components/_alert.scss | 49 +++++++++++++++++---------------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss index d940a2eff..530a08366 100644 --- a/src/scss/components/_alert.scss +++ b/src/scss/components/_alert.scss @@ -1,54 +1,55 @@ // CSS Custom Properties -:root { - --alert-spacing-inset: var(--spacing-inset-s); - --alert-color-background: var(--color-background-inverse); - --alert-color-border: var(--color-border-secondary); - --alert-color-text: var(--color-text-base); - --alert-color-heading: var(--color-text-base); - --alert-margin: var(--spacing-stack-m); +.alert { + --#{$prefix}alert-color-background: var(--#{prefix}color-background-inverse); + --#{$prefix}alert-color-border: var(--#{prefix}color-border-secondary); + --#{$prefix}alert-color-text: var(--#{prefix}color-text-base); + --#{$prefix}alert-color-heading: var(--#{prefix}color-text-base); + --#{$prefix}alert-sizing-border: 0.5rem; + --#{$prefix}alert-spacing-inset: var(--#{prefix}spacing-inset-s); + --#{$prefix}alert-spacing-inset-extra: var(--#{$prefix}spacing-16x); // TODO: replace with semantic token + --#{$prefix}alert-spacing-outside: var(--#{prefix}spacing-stack-m); } // Base styles .alert { position: relative; - padding: var(--alert-spacing-inset); - margin-bottom: var(--alert-margin); - border: 1px solid var(--alert-color-border); - padding-left: 4em; - background-color: var(--alert-color-background); - color: var(--alert-color-text); + padding: var(--#{$prefix}alert-spacing-inset); + margin-bottom: var(--#{$prefix}alert-margin); + border: 1px solid var(--#{$prefix}alert-color-border); + background-color: var(--#{$prefix}alert-color-background); + color: var(--#{$prefix}alert-color-text); background-position: 20px 12px; background-repeat: no-repeat; - background-size: 32px 32px; + background-size: 2rem 2rem; @include media-breakpoint-up(lg) { - --alert-spacing-inset: var(--spacing-inset-m); + --#{$prefix}alert-spacing-inset: var(--spacing-inset-m); + padding-left: calc(var(--#{$prefix}alert-spacing-inset) * 4); } } // Headings for larger alerts .alert-heading { // Specified to prevent conflicts of changing $headings-color - color: var(--alert-color-heading); + color: var(--#{$prefix}alert-color-heading); } // Provide class for links that match alerts .alert-link { - font-weight: var(--font-weight-semibold); - text-decoration: underline; + font-weight: var(--#{prefix}font-weight-solid); } // Dismissible alerts // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: var(--alert-spacing-inset); + padding-right: var(--#{$prefix}alert-spacing-inset); // Adjust close link position .btn-close { position: absolute; top: 50%; right: 0; transform: translateY(-50%); - padding: var(--alert-spacing-inset); + padding: var(--#{$prefix}alert-spacing-inset); color: inherit; } } @@ -56,10 +57,10 @@ // Alternate styles // Generate contextual modifier classes for colorizing the alert. // Loop through theme colors to generate contextual modifier classes for colorizing the alert -@each $color, $value in $status { - @if ($color == 'danger' or $color == 'warning' or $color == 'success' or $color == 'info' or $color == 'primary') { - .alert-#{$color} { - border-left: 8px solid #{$value}; +@each $type, $value in $status { + @if index(('danger', 'warning', 'success', 'info', 'primary'), $type) { + .alert-#{$type} { + border-left: var(--#{$prefix}alert-sizing-border) solid #{$value}; } } } From 16e9884fc359f14d2fbf0a562cd413a12ebfa169 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Wed, 8 Jan 2025 11:43:35 +0100 Subject: [PATCH 20/59] refactor: status variants, icons and space --- docs/componenti/alert.md | 23 ++++++++++++-- src/scss/components/_alert.scss | 54 ++++++++++++++++----------------- 2 files changed, 47 insertions(+), 30 deletions(-) diff --git a/docs/componenti/alert.md b/docs/componenti/alert.md index 791b4b450..2f9972865 100755 --- a/docs/componenti/alert.md +++ b/docs/componenti/alert.md @@ -12,12 +12,31 @@ Gli avvisi sono disponibili in quattro tipologie diverse e sono adatti a qualsia {% comment %}Example name: Varianti per tipologia{% endcomment %} {% capture example %} -{% assign colors = "primary,info,success,warning,danger" | split: ','%} + + + + + + + + {% endcapture %} {% include example.html content=example %} diff --git a/src/scss/components/_alert.scss b/src/scss/components/_alert.scss index 530a08366..6b5495efa 100644 --- a/src/scss/components/_alert.scss +++ b/src/scss/components/_alert.scss @@ -1,13 +1,14 @@ // CSS Custom Properties .alert { - --#{$prefix}alert-color-background: var(--#{prefix}color-background-inverse); - --#{$prefix}alert-color-border: var(--#{prefix}color-border-secondary); - --#{$prefix}alert-color-text: var(--#{prefix}color-text-base); - --#{$prefix}alert-color-heading: var(--#{prefix}color-text-base); + --#{$prefix}alert-color-background: var(--#{$prefix}color-background-inverse); + --#{$prefix}alert-color-border: var(--#{$prefix}color-border-secondary); + --#{$prefix}alert-color-text: var(--#{$prefix}color-text-base); + --#{$prefix}alert-color-heading: var(--#{$prefix}color-text-base); + --#{$prefix}alert-icon-spacing: var(--#{$prefix}icon-spacing); --#{$prefix}alert-sizing-border: 0.5rem; - --#{$prefix}alert-spacing-inset: var(--#{prefix}spacing-inset-s); + --#{$prefix}alert-spacing-inset: var(--#{$prefix}spacing-inset-s); --#{$prefix}alert-spacing-inset-extra: var(--#{$prefix}spacing-16x); // TODO: replace with semantic token - --#{$prefix}alert-spacing-outside: var(--#{prefix}spacing-stack-m); + --#{$prefix}alert-spacing-outside: var(--#{$prefix}spacing-stack-m); } // Base styles @@ -18,13 +19,10 @@ border: 1px solid var(--#{$prefix}alert-color-border); background-color: var(--#{$prefix}alert-color-background); color: var(--#{$prefix}alert-color-text); - background-position: 20px 12px; - background-repeat: no-repeat; - background-size: 2rem 2rem; @include media-breakpoint-up(lg) { - --#{$prefix}alert-spacing-inset: var(--spacing-inset-m); - padding-left: calc(var(--#{$prefix}alert-spacing-inset) * 4); + --#{$prefix}alert-spacing-inset: var(-#{$prefix}spacing-inset-m); + padding-left: var(--#{$prefix}alert-spacing-inset); } } @@ -34,9 +32,21 @@ color: var(--#{$prefix}alert-color-heading); } +// // Manage the space between alert paragraphs +// .alert-text { +// margin-bottom: 0; +// & + & { +// margin-top: var(--#{$prefix}alert-spacing-inset); +// } +// } + +.alert-icon { + margin-right: var(--#{$prefix}alert-icon-spacing); +} + // Provide class for links that match alerts .alert-link { - font-weight: var(--#{prefix}font-weight-solid); + font-weight: var(--#{$prefix}font-weight-solid); } // Dismissible alerts @@ -62,21 +72,9 @@ .alert-#{$type} { border-left: var(--#{$prefix}alert-sizing-border) solid #{$value}; } - } -} -.alert-danger { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($danger)}' d='M11.5 14.2V5.7h1.2v8.5zm-.1 4.1h1.2v-1.8h-1.2zM22 7.9v8.3L16.1 22H7.9L2 16.2V7.9L7.9 2h8.2zm-1 .4L15.7 3H8.3L3 8.3v7.5L8.3 21h7.4l5.3-5.2z'%3E%3C/path%3E%3C/svg%3E"); -} -.alert-warning { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($warning)}' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 19a9 9 0 1 1 9-9 9 9 0 0 1-9 9zm-.5-6.8V5.7h1.2v8.5zm-.1 2.3h1.2v1.8h-1.2z'%3E%3C/path%3E%3C/svg%3E"); -} -.alert-success { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($success)}' d='M17.1 7.9l.7.7-7.8 7.6-4.7-4.6.7-.7 4 3.9zM22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10zm-1 0a9 9 0 1 0-9 9 9 9 0 0 0 9-9z'%3E%3C/path%3E%3C/svg%3E"); -} -.alert-info { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($info)}' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 19a9 9 0 1 1 9-9 9 9 0 0 1-9 9zm-.7-15h1.5v2h-1.5zm0 3h1.5v9h-1.5z'%3E%3C/path%3E%3C/svg%3E"); -} -.alert-primary { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($primary)}' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 19a9 9 0 1 1 9-9 9 9 0 0 1-9 9zm-.7-15h1.5v2h-1.5zm0 3h1.5v9h-1.5z'%3E%3C/path%3E%3C/svg%3E"); + .alert-#{$type} .alert-icon { + fill: #{$value}; + } + } } From 029d09efbae52e4d6edb3d4f8b247523f56d0971 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Wed, 8 Jan 2025 11:43:59 +0100 Subject: [PATCH 21/59] feat: add icon spacing global var --- src/scss/base/_root.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss index 7ac9f84a9..982686947 100644 --- a/src/scss/base/_root.scss +++ b/src/scss/base/_root.scss @@ -298,4 +298,5 @@ --#{$prefix}icon-primary-hover: var(--dsi-icon-primary-hover); --#{$prefix}icon-primary: var(--dsi-icon-primary); --#{$prefix}icon-default: var(--dsi-icon-default); + --#{$prefix}icon-spacing: var(--dsi-spacing-inline-xs); } From d2e4b43d47abc35e0e4b4a24038f99e690b320d6 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Wed, 8 Jan 2025 14:58:31 +0100 Subject: [PATCH 22/59] fix: remove for cycle --- docs/componenti/alert.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/docs/componenti/alert.md b/docs/componenti/alert.md index 2f9972865..47ee0a309 100755 --- a/docs/componenti/alert.md +++ b/docs/componenti/alert.md @@ -12,14 +12,6 @@ Gli avvisi sono disponibili in quattro tipologie diverse e sono adatti a qualsia {% comment %}Example name: Varianti per tipologia{% endcomment %} {% capture example %} - @@ -98,10 +95,6 @@ In questi casi il testo sarà di colore bianco. {% capture example %}
-
- - -
@@ -133,28 +126,24 @@ Per utilizzare un'icona all'interno degli Avatar è sufficiente includere il cod {% capture example %}
-
- - -
- +
- +
- +
- +
- +
@@ -176,7 +165,7 @@ Per associare un Avatar ad un'azione o un link, utilizzare il tag `` con rela - +
diff --git a/src/scss/components/_avatar.scss b/src/scss/components/_avatar.scss index 4092a9f19..a9a2b3a10 100644 --- a/src/scss/components/_avatar.scss +++ b/src/scss/components/_avatar.scss @@ -1,89 +1,103 @@ @use 'sass:math'; +// Avatar variants map +$avatar-variants: ( + primary: $color-primary, + secondary: $color-secondary, + green: $green, // TODO: replace with different color + orange: $orange, // TODO: replace with different color + red: $red // TODO: replace with different color +); + +// Avatar local variables +.avatar { + --#{$prefix}avatar-color-bg-default: var(--#{$prefix}color-background-secondary-lighter); + --#{$prefix}avatar-color-bg-primary: var(--#{$prefix}color-background-primary); + --#{$prefix}avatar-color-bg-secondary: var(--#{$prefix}color-background-secondary); + --#{$prefix}avatar-color-bg-red: var(--#{$prefix}color-background-secondary); + --#{$prefix}avatar-color-text: var(--#{$prefix}color-text-secondary); + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-2); + --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-base); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-s); + --#{$prefix}avatar-radius: var(--#{$prefix}radius-circle); + --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-m); // default size + --#{$prefix}avatar-size-s: 1.5rem; // 24px + --#{$prefix}avatar-size-m: 2.5rem; // 32px + --#{$prefix}avatar-size-l: 3.5rem; // 48px + --#{$prefix}avatar-size-xl: 5rem; // 80px + --#{$prefix}avatar-size-xxl: 7rem; // 112px +} + .avatar { display: inline-flex; - overflow: hidden; - border-radius: 50%; - width: $avatar-base-size * 4; // default size equals to md - height: $avatar-base-size * 4; // default size equals to md - justify-content: center; align-items: center; - background: $color-background-secondary-lighter; // UI kit - color: $color-text-secondary; // UI kit - box-sizing: content-box; + justify-content: center; + width: var(--#{$prefix}avatar-sizing); + height: var(--#{$prefix}avatar-sizing); + overflow: hidden; + border-radius: var(--#{$prefix}avatar-radius); + background: var(--#{$prefix}avatar-color-bg-default); + color: var(--#{$prefix}avatar-color-text); + font-weight: var(--#{$prefix}avatar-font-weight); transition: background-color 0.2s; + // Avatar color variants + @each $avatar-variant, $avatar-variant-color in $avatar-variants { + &.avatar-#{$avatar-variant} { + background: $avatar-variant-color; + --#{$prefix}avatar-color-text: var(--#{$prefix}color-text-inverse); + } + } + + // &.size-xs { + // --#{$prefix}avatar-font-size: 10px; + // --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-solid); + // --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-xs); + // --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xs); + // } + + // Avatar image img { width: 100%; height: 100%; + transition: filter 0.2s; object-fit: cover; object-position: center; - transition: filter 0.2s; - border-radius: 50%; } + // Avatar first letters p { - font-size: 1rem; // default size equals to md margin: 0; - text-align: center; - line-height: 1em; - position: absolute; + font-size: var(--#{$prefix}avatar-font-size); } + // Avatar icons .icon { - height: 16px; // default size equals to md - width: 16px; - } - - &.avatar-primary { - background: $primary; - } - - &.avatar-secondary { - background: $secondary; - } - - &.avatar-green { - background: $green; - } - - &.avatar-orange { - background: $orange; - } - - &.avatar-red { - background: $red; - } - - &.avatar-primary, - &.avatar-secondary, - &.avatar-green, - &.avatar-orange, - &.avatar-red { - color: $white; + width: var(--#{$prefix}avatar-icon-size); + height: var(--#{$prefix}avatar-icon-size); } &.avatar-dropdown { - overflow: visible; position: relative; + overflow: visible; .dropdown { position: absolute; top: 0; - left: 0; right: 0; - border: 0; + left: 0; display: flex; - justify-content: center; align-items: center; + justify-content: center; height: 100%; + border: 0; } .btn-dropdown { - color: inherit; padding: 0; - line-height: 0; + color: inherit; font-size: 0.75rem; + line-height: 0; } .list-item { @@ -125,145 +139,145 @@ } } - &.size-xs { - width: $avatar-base-size * 2; - height: $avatar-base-size * 2; - - p { - font-size: 0.625rem; - } + &.size-sm { + --#{$prefix}avatar-font-size: 12px; + --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-solid); + --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-s); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xs); + } - .icon { - height: 10px; - width: 10px; - } + &.size-md { + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-3); + --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-sizing-m); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-s); } - &.size-sm { - width: $avatar-base-size * 3; - height: $avatar-base-size * 3; + &.size-lg { + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-4); + --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-l); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-m); + } - p { - font-size: 0.875rem; - } + &.size-xl { + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-8); + --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-xl); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-l); + } - .icon { - height: 12px; - width: 12px; - } + &.size-xxl { + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-10); + --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-xxl); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xl); } - &.size-md { - width: $avatar-base-size * 4; - height: $avatar-base-size * 4; +} - p { - font-size: 1rem; - } + // &.size-xs { - .icon { - height: 16px; - width: 16px; - } - .avatar-presence, - .avatar-status { - border-width: 1px; + // .icon { + // width: 10px; + // height: 10px; + // } + // } - .icon { - display: none; - } - } - } + // &.size-sm { - &.size-lg { - width: $avatar-base-size * 5; - height: $avatar-base-size * 5; + // .icon { + // width: 12px; + // height: 12px; + // } + // } - p { - font-size: 1.125rem; - } + // &.size-md { - .icon { - height: 20px; - width: 20px; - } + // .icon { + // width: 16px; + // height: 16px; + // } - .avatar-presence, - .avatar-status { - right: -2px; - width: 15px; - height: 15px; - } + // .avatar-presence, + // .avatar-status { + // border-width: 1px; - .avatar-status { - top: math.div($avatar-base-size, 48); - } - } + // .icon { + // display: none; + // } + // } + // } - &.size-xl { - width: $avatar-base-size * 10; - height: $avatar-base-size * 10; + // &.size-lg { - p { - font-size: 2.25rem; - } - .icon { - height: 40px; - width: 40px; - } + // .icon { + // width: 20px; + // height: 20px; + // } - .avatar-presence, - .avatar-status { - right: 6px; - width: 18px; - height: 18px; - } + // .avatar-presence, + // .avatar-status { + // right: -2px; + // width: 15px; + // height: 15px; + // } - .avatar-presence { - bottom: $avatar-base-size; - } + // .avatar-status { + // top: math.div($avatar-base-size, 48); + // } + // } - .avatar-status { - top: $avatar-base-size * 0.25; - } - } + // &.size-xl { - &.size-xxl { - width: $avatar-base-size * 16; - height: $avatar-base-size * 16; - p { - font-size: 58px; - } + // .icon { + // width: 40px; + // height: 40px; + // } - .icon { - height: 62px; - width: 62px; - } + // .avatar-presence, + // .avatar-status { + // right: 6px; + // width: 18px; + // height: 18px; + // } - .avatar-presence, - .avatar-status { - right: 4px; - width: 24px; - height: 24px; + // .avatar-presence { + // bottom: $avatar-base-size; + // } - .icon { - width: 20px; - height: 20px; - } - } + // .avatar-status { + // top: $avatar-base-size * 0.25; + // } + // } - .avatar-presence { - bottom: $avatar-base-size * 2; - } + // &.size-xxl { + + // .icon { + // width: 62px; + // height: 62px; + // } + + // .avatar-presence, + // .avatar-status { + // right: 4px; + // width: 24px; + // height: 24px; + + // .icon { + // width: 20px; + // height: 20px; + // } + // } + + // .avatar-presence { + // bottom: $avatar-base-size * 2; + // } + + // .avatar-status { + // top: $avatar-base-size; + // } + // } - .avatar-status { - top: $avatar-base-size; - } - } -} a.avatar { filter: brightness(100%); @@ -315,15 +329,15 @@ a.avatar { .avatar-status { position: absolute; right: 0; + display: flex; + align-items: center; + justify-content: center; width: 10px; height: 10px; border: 2px solid $white; + border-radius: 50%; background: $color-background-secondary-lighter; color: $white; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; .icon { width: 18px; @@ -346,15 +360,15 @@ a.avatar { &.hidden { &:after { - content: ''; position: absolute; + top: 50%; + left: 50%; + content: ''; width: calc(100% - 4px); height: calc(100% - 4px); + border-radius: 50%; background: $white; transform: translateX(-50%) translateY(-50%); - top: 50%; - left: 50%; - border-radius: 50%; } } } @@ -377,8 +391,8 @@ a.avatar { &.avatar-extra-text { display: inline-flex; - justify-content: flex-start; align-items: center; + justify-content: flex-start; margin-bottom: 16px; .avatar { @@ -386,14 +400,14 @@ a.avatar { } .extra-text { - line-height: 1.2em; margin-left: 16px; + line-height: 1.2em; h3, h4 { - font-weight: 600; margin: 0; font-size: 1.125rem; + font-weight: 600; a { display: inline-block; @@ -403,8 +417,8 @@ a.avatar { p, time { margin: 0; - text-transform: uppercase; font-size: 0.75rem; + text-transform: uppercase; } } } @@ -457,11 +471,11 @@ a.avatar { .avatar-group-stacked { display: flex; - justify-content: flex-start; + flex-direction: row; align-items: flex-start; + justify-content: flex-start; margin: 0; padding: 0; - flex-direction: row; li { list-style-type: none; line-height: 0; From 8cfc1f8ba023f9300ad30a7117a9ea7fdd0a0d2b Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Sun, 12 Jan 2025 17:05:19 +0100 Subject: [PATCH 30/59] refactor: back to top --- src/scss/components/_back-to-top.scss | 96 ++++++++++++++------------- 1 file changed, 50 insertions(+), 46 deletions(-) diff --git a/src/scss/components/_back-to-top.scss b/src/scss/components/_back-to-top.scss index d1139ee68..92c5a0eef 100644 --- a/src/scss/components/_back-to-top.scss +++ b/src/scss/components/_back-to-top.scss @@ -1,13 +1,19 @@ -/*back to top*/ +.back-to-top { + --#{$prefix}back-to-top-bg: var(--#{$prefix}color-background-primary); + --#{$prefix}back-to-top-bg-position: 1rem; + --#{$prefix}back-to-top-radius: var(--#{$prefix}radius-circle); + --#{$prefix}back-to-top-sizing: 40px; +} + .back-to-top { position: fixed; - bottom: 16px; - right: 16px; - background: $primary; - width: 40px; - height: 40px; + bottom: var(--#{$prefix}back-to-top-bg-position); + right: var(--#{$prefix}back-to-top-bg-position); + background: var(--#{$prefix}color-background-primary); + width: var(--#{$prefix}back-to-top-sizing); + height: var(--#{$prefix}back-to-top-sizing); text-decoration: none; - border-radius: 50%; + border-radius: var(--#{$prefix}back-to-top-radius); display: block; visibility: hidden; opacity: 0; @@ -20,7 +26,24 @@ z-index: 1; transform: scale(0.7); transform-origin: center center; - //fade in + + // Tablet vertical + @include media-breakpoint-up(md) { + --#{$prefix}back-top-sizing: 3.5rem; // 56px + } + + // Desktop + @include media-breakpoint-up(xl) { + --#{$prefix}back-to-top-position: 2rem; // 32px + } + + &:hover { + --back-to-top-bg: var(--#{$prefix}color-background-primary-hover ); + text-decoration: none; + } + + + // Fade in &.back-to-top-show { visibility: visible; opacity: 1; @@ -31,72 +54,53 @@ opacity 0.1s ease-in-out; transform: scale(1); } - &:hover { - background: shade-color($primary, 10%); - text-decoration: none; - } - //caret + + // Icon .icon { margin: 0; position: relative; transform: scale(0.75); top: 4px; + + @include media-breakpoint-up(md) { + transform: scale(1); + top: 10px; + } + &:before { margin: 0; - color: $white; + color: var(--#{$prefix}icon-inverse); } } - //shadow + // Shadow &.shadow { &:hover { box-shadow: 0 0.3rem 0.75rem rgba(0, 0, 0, 0.3) !important; } } - //dark version + // Dark version &.dark { - background: #fff; + --#{$prefix}back-to-top-bg: var(--#{$prefix}color-background-inverse); &:hover { - background: $neutral-1-a1; // TODO Missing in the UI kit + --#{$prefix}back-to-top-bg: var(--dsi-color-slate-93); } - //caret .icon { &:before { - color: $neutral-1-a8; // TODO Missing in the UI kit + color: var(--#{$prefix}icon-secondary); } } } -} -//Tablet vertical -@include media-breakpoint-up(md) { - /*back to top*/ - .back-to-top { - width: 56px; - height: 56px; + // Small version + &.back-to-top-small { + --#{$prefix}back-top-sizing: 2.5rem; // 40px .icon { - transform: scale(1); - top: 10px; - } - //small version - &.back-to-top-small { - width: 40px; - height: 40px; - //caret - .icon { - transform: scale(0.75); - top: 4px; - } + transform: scale(0.75); + top: 4px; } } } -//Desktop -@include media-breakpoint-up(xl) { - .back-to-top { - bottom: 32px; - right: 32px; - } -} From 0282916b27fff7c552e8f6602fba1428df4923cb Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 14 Jan 2025 16:47:06 +0100 Subject: [PATCH 31/59] fix: px to rem --- src/scss/components/_back-to-top.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/components/_back-to-top.scss b/src/scss/components/_back-to-top.scss index 92c5a0eef..5893fdbc4 100644 --- a/src/scss/components/_back-to-top.scss +++ b/src/scss/components/_back-to-top.scss @@ -2,7 +2,7 @@ --#{$prefix}back-to-top-bg: var(--#{$prefix}color-background-primary); --#{$prefix}back-to-top-bg-position: 1rem; --#{$prefix}back-to-top-radius: var(--#{$prefix}radius-circle); - --#{$prefix}back-to-top-sizing: 40px; + --#{$prefix}back-to-top-sizing: 2.5rem; } .back-to-top { From 349085e36eb93f69e50293e4fe2f219a62496f16 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 14 Jan 2025 16:47:19 +0100 Subject: [PATCH 32/59] fix: icon variables --- src/scss/base/_root.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss index dac2d10ec..f97bb2cc9 100644 --- a/src/scss/base/_root.scss +++ b/src/scss/base/_root.scss @@ -144,11 +144,11 @@ --#{$prefix}caption-line-height: var(--dsi-caption-line-height); --#{$prefix}caption-font-weight-regular: var(--dsi-caption-font-weight-regular); --#{$prefix}caption-font-weight-semibold: var(--dsi-caption-font-weight-semibold); - --#{$prefix}icon-size-xxl: var(--dsi-icon-size-xxl); - --#{$prefix}icon-size-xl: var(--dsi-icon-size-xl); - --#{$prefix}icon-size-l: var(--dsi-icon-size-l); - --#{$prefix}icon-size-m: var(--dsi-icon-size-m); - --#{$prefix}icon-size-s: var(--dsi-icon-size-s); + --#{$prefix}icon-size-xl: var(--dsi-icon-size-xxl); + --#{$prefix}icon-size-l: var(--dsi-icon-size-xl); + --#{$prefix}icon-size-m: var(--dsi-icon-size-l); + --#{$prefix}icon-size-s: var(--dsi-icon-size-m); + --#{$prefix}icon-size-xs: var(--dsi-icon-size-s); --#{$prefix}border-broad: var(--dsi-border-broad); --#{$prefix}border-thick: var(--dsi-border-thick); --#{$prefix}border-double: var(--dsi-border-double); From 4f71639b1d6c3386ea2309f8ad287357656a70ef Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 14 Jan 2025 16:47:45 +0100 Subject: [PATCH 33/59] fix: comment tokens .scss --- src/scss/base/_variables.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss index cbc40196d..09d80cf7e 100644 --- a/src/scss/base/_variables.scss +++ b/src/scss/base/_variables.scss @@ -1,5 +1,5 @@ // Import Design Tokens Italia -@import '~design-tokens-italia/scss/dsi-tokens'; +// @import '~design-tokens-italia/scss/dsi-tokens'; // Color vars // HSB (https://it.wikipedia.org/wiki/Hue_Saturation_Brightness, coincidente con il modello HSV) @@ -2123,8 +2123,11 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; // NEW VARIABLES +// Global colors used inside sass loops and maps +$color-primary: var(--#{$prefix}theme-primary); +$color-secondary: var(--#{$prefix}color-background-secondary); + // Variables used in _maps.scss inside the $status map -$color-theme-primary: var(--#{$prefix}theme-primary); $color-status-info: var(--#{$prefix}color-background-secondary); $color-status-success: var(--#{$prefix}color-status-success); $color-status-warning: var(--#{$prefix}color-status-warning); From c7d06fe8bf9f100e21862ff1e1d4dd49ca652f1d Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 14 Jan 2025 16:48:00 +0100 Subject: [PATCH 34/59] fix: remove theme- --- src/scss/base/_maps.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/base/_maps.scss b/src/scss/base/_maps.scss index dc3b66ef4..3244c6317 100644 --- a/src/scss/base/_maps.scss +++ b/src/scss/base/_maps.scss @@ -53,8 +53,9 @@ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) $gutters: $spacers !default; +// Global status colors $status: ( - 'primary': $color-theme-primary, + 'primary': $color-primary, 'info': $color-status-info, 'success': $color-status-success, 'warning': $color-status-warning, From 89de617f4e00c7e5129693277be0bd7e9cc3decd Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 14 Jan 2025 16:48:18 +0100 Subject: [PATCH 35/59] fix: change font family variable --- src/scss/base/_reboot.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/base/_reboot.scss b/src/scss/base/_reboot.scss index fd6987f21..9f3f1b753 100644 --- a/src/scss/base/_reboot.scss +++ b/src/scss/base/_reboot.scss @@ -44,7 +44,7 @@ // scss-docs-start reboot-body-rules body { margin: 0; // 1 - font-family: var(--#{$prefix}body-font-family); + font-family: var(--#{$prefix}font-sans); @include font-size(var(--#{$prefix}body-font-size)); font-weight: var(--#{$prefix}body-font-weight); line-height: var(--#{$prefix}body-line-height); From e554bb94680e381b00728216c0cd3920a95233cb Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 14 Jan 2025 18:23:52 +0100 Subject: [PATCH 36/59] refactor: avatar status and presence --- src/scss/components/_avatar.scss | 312 +++++++++++-------------------- 1 file changed, 104 insertions(+), 208 deletions(-) diff --git a/src/scss/components/_avatar.scss b/src/scss/components/_avatar.scss index a9a2b3a10..7ca3d598f 100644 --- a/src/scss/components/_avatar.scss +++ b/src/scss/components/_avatar.scss @@ -11,50 +11,83 @@ $avatar-variants: ( // Avatar local variables .avatar { - --#{$prefix}avatar-color-bg-default: var(--#{$prefix}color-background-secondary-lighter); - --#{$prefix}avatar-color-bg-primary: var(--#{$prefix}color-background-primary); - --#{$prefix}avatar-color-bg-secondary: var(--#{$prefix}color-background-secondary); - --#{$prefix}avatar-color-bg-red: var(--#{$prefix}color-background-secondary); - --#{$prefix}avatar-color-text: var(--#{$prefix}color-text-secondary); + --#{$prefix}avatar-background: var(--#{$prefix}color-background-secondary-lighter); + --#{$prefix}avatar-text-color: var(--#{$prefix}color-text-secondary); --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-2); --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-base); --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-s); --#{$prefix}avatar-radius: var(--#{$prefix}radius-circle); - --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-m); // default size + --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-m); // default size --#{$prefix}avatar-size-s: 1.5rem; // 24px --#{$prefix}avatar-size-m: 2.5rem; // 32px --#{$prefix}avatar-size-l: 3.5rem; // 48px --#{$prefix}avatar-size-xl: 5rem; // 80px --#{$prefix}avatar-size-xxl: 7rem; // 112px + --#{$prefix}avatar-dot-size: 10px; + --#{$prefix}avatar-dot-border-size: 1.5px; + --#{$prefix}avatar-dot-border-color: var(--#{$prefix}color-border-inverse); + --#{$prefix}avatar-dot-offset-right: 0; + --#{$prefix}avatar-dot-offset-top: 0; + --#{$prefix}avatar-dot-offset-bottom: 0; } .avatar { display: inline-flex; align-items: center; justify-content: center; - width: var(--#{$prefix}avatar-sizing); - height: var(--#{$prefix}avatar-sizing); + width: var(--#{$prefix}avatar-size); + height: var(--#{$prefix}avatar-size); overflow: hidden; border-radius: var(--#{$prefix}avatar-radius); - background: var(--#{$prefix}avatar-color-bg-default); - color: var(--#{$prefix}avatar-color-text); + background: var(--#{$prefix}avatar-background); + color: var(--#{$prefix}avatar-text-color); font-weight: var(--#{$prefix}avatar-font-weight); transition: background-color 0.2s; // Avatar color variants @each $avatar-variant, $avatar-variant-color in $avatar-variants { &.avatar-#{$avatar-variant} { - background: $avatar-variant-color; - --#{$prefix}avatar-color-text: var(--#{$prefix}color-text-inverse); + --#{$prefix}avatar-background: #{$avatar-variant-color}; + --#{$prefix}avatar-text-color: var(--#{$prefix}color-text-inverse); } } - // &.size-xs { - // --#{$prefix}avatar-font-size: 10px; - // --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-solid); - // --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-xs); - // --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xs); - // } + &.size-sm { + --#{$prefix}avatar-font-size: 12px; + --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-solid); + --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-s); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xs); + } + + &.size-md { + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-3); + --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-m); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-s); + } + + &.size-lg { + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-4); + --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-l); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-m); + --#{$prefix}avatar-dot-offset-right: -2px; + --#{$prefix}avatar-dot-size: 14px; + } + + &.size-xl { + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-8); + --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-xl); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-l); + --#{$prefix}avatar-dot-offset-right: 6px; + --#{$prefix}avatar-dot-size: 16px; + } + + &.size-xxl { + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-10); + --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-xxl); + --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xl); + --#{$prefix}avatar-dot-offset-right: 4px; + --#{$prefix}avatar-dot-size: 20px; + } // Avatar image img { @@ -139,144 +172,72 @@ $avatar-variants: ( } } - &.size-sm { - --#{$prefix}avatar-font-size: 12px; - --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-solid); - --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-s); - --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xs); + &-wrapper { + position: relative; } - &.size-md { - --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-3); - --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-sizing-m); - --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-s); - } + &-presence, + &-status { + position: absolute; + right: var(--#{$prefix}avatar-dot-offset-right); + display: flex; + align-items: center; + justify-content: center; + width: var(--#{$prefix}avatar-dot-size); + height: var(--#{$prefix}avatar-dot-size); + border: var(--#{$prefix}avatar-dot-border-size) solid var(--#{$prefix}avatar-dot-border-color); + border-radius: var(--#{$prefix}avatar-radius); + background: $color-background-secondary-lighter; + color: $white; - &.size-lg { - --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-4); - --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-l); - --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-m); + .icon { + stroke-width: 2px; + stroke: var(--#{$prefix}icon-inverse); + } } - &.size-xl { - --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-8); - --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-xl); - --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-l); - } + &-presence { + bottom: 8px; + } - &.size-xxl { - --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-10); - --#{$prefix}avatar-sizing: var(--#{$prefix}avatar-size-xxl); - --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xl); + &-presence.active { + background: $green; } -} - - // &.size-xs { - - - // .icon { - // width: 10px; - // height: 10px; - // } - // } - - // &.size-sm { - - // .icon { - // width: 12px; - // height: 12px; - // } - // } - - // &.size-md { - - // .icon { - // width: 16px; - // height: 16px; - // } - - // .avatar-presence, - // .avatar-status { - // border-width: 1px; - - // .icon { - // display: none; - // } - // } - // } - - // &.size-lg { - - - // .icon { - // width: 20px; - // height: 20px; - // } - - // .avatar-presence, - // .avatar-status { - // right: -2px; - // width: 15px; - // height: 15px; - // } - - // .avatar-status { - // top: math.div($avatar-base-size, 48); - // } - // } - - // &.size-xl { - - - // .icon { - // width: 40px; - // height: 40px; - // } - - // .avatar-presence, - // .avatar-status { - // right: 6px; - // width: 18px; - // height: 18px; - // } - - // .avatar-presence { - // bottom: $avatar-base-size; - // } - - // .avatar-status { - // top: $avatar-base-size * 0.25; - // } - // } - - // &.size-xxl { + &-presence.busy { + background: $red; + } - // .icon { - // width: 62px; - // height: 62px; - // } + &-presence.hidden { + &:after { + position: absolute; + top: 50%; + left: 50%; + content: ''; + width: calc(100% - 4px); + height: calc(100% - 4px); + border-radius: 50%; + background: $white; + transform: translateX(-50%) translateY(-50%); + } + } - // .avatar-presence, - // .avatar-status { - // right: 4px; - // width: 24px; - // height: 24px; + &-status { + top: 0; + } - // .icon { - // width: 20px; - // height: 20px; - // } - // } + &-status.approved { + background: $green; + } - // .avatar-presence { - // bottom: $avatar-base-size * 2; - // } + &-status.declined { + background: $red; + } - // .avatar-status { - // top: $avatar-base-size; - // } - // } + &-status.notify { + background: $primary-b1; + } +} a.avatar { @@ -323,71 +284,6 @@ a.avatar { } .avatar-wrapper { - position: relative; - - .avatar-presence, - .avatar-status { - position: absolute; - right: 0; - display: flex; - align-items: center; - justify-content: center; - width: 10px; - height: 10px; - border: 2px solid $white; - border-radius: 50%; - background: $color-background-secondary-lighter; - color: $white; - - .icon { - width: 18px; - height: 18px; - stroke-width: 1px; - stroke: $white; - } - } - - .avatar-presence { - bottom: $avatar-base-size; - - &.active { - background: $green; - } - - &.busy { - background: $red; - } - - &.hidden { - &:after { - position: absolute; - top: 50%; - left: 50%; - content: ''; - width: calc(100% - 4px); - height: calc(100% - 4px); - border-radius: 50%; - background: $white; - transform: translateX(-50%) translateY(-50%); - } - } - } - - .avatar-status { - top: 0; - - &.approved { - background: $green; - } - - &.declined { - background: $red; - } - - &.notify { - background: $primary-b1; - } - } &.avatar-extra-text { display: inline-flex; From 5b1edb2bc93f2e532b4e2a25f911a12a06c1e480 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 14 Jan 2025 18:35:43 +0100 Subject: [PATCH 37/59] refactor: optimize code --- src/scss/components/_avatar.scss | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/src/scss/components/_avatar.scss b/src/scss/components/_avatar.scss index 7ca3d598f..d28bcc85a 100644 --- a/src/scss/components/_avatar.scss +++ b/src/scss/components/_avatar.scss @@ -85,7 +85,7 @@ $avatar-variants: ( --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-10); --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-xxl); --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xl); - --#{$prefix}avatar-dot-offset-right: 4px; + --#{$prefix}avatar-dot-offset-right: 10px; --#{$prefix}avatar-dot-size: 20px; } @@ -196,18 +196,20 @@ $avatar-variants: ( } } - &-presence { - bottom: 8px; - } - - &-presence.active { - background: $green; + &-presence.active, + &-status.approved { + background: var(--#{$prefix}color-background-success); } - &-presence.busy { + &-presence.busy, + &-status.declined { background: $red; } + &-presence { + bottom: 8px; + } + &-presence.hidden { &:after { position: absolute; @@ -217,7 +219,7 @@ $avatar-variants: ( width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%; - background: $white; + background: var(--#{$prefix}color-background-inverse); transform: translateX(-50%) translateY(-50%); } } @@ -226,16 +228,8 @@ $avatar-variants: ( top: 0; } - &-status.approved { - background: $green; - } - - &-status.declined { - background: $red; - } - &-status.notify { - background: $primary-b1; + background: var(--#{$prefix}theme-primary); } } From afddf4e70b92bfc35766b7b4917004d8e0ca6e56 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Wed, 15 Jan 2025 18:42:38 +0100 Subject: [PATCH 38/59] fix: remove custom color variants --- src/scss/components/_avatar.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/scss/components/_avatar.scss b/src/scss/components/_avatar.scss index d28bcc85a..1ed7a3894 100644 --- a/src/scss/components/_avatar.scss +++ b/src/scss/components/_avatar.scss @@ -1,12 +1,10 @@ @use 'sass:math'; // Avatar variants map +// Edit the colors to match your theme or add more variants $avatar-variants: ( primary: $color-primary, - secondary: $color-secondary, - green: $green, // TODO: replace with different color - orange: $orange, // TODO: replace with different color - red: $red // TODO: replace with different color + secondary: $color-secondary ); // Avatar local variables From baa43d938bf058b63b3be0990b7882b41048f03f Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Wed, 15 Jan 2025 18:44:25 +0100 Subject: [PATCH 39/59] refactor: avatar size --- src/scss/components/_avatar.scss | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/scss/components/_avatar.scss b/src/scss/components/_avatar.scss index 1ed7a3894..02f1a6d3d 100644 --- a/src/scss/components/_avatar.scss +++ b/src/scss/components/_avatar.scss @@ -15,12 +15,7 @@ $avatar-variants: ( --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-base); --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-s); --#{$prefix}avatar-radius: var(--#{$prefix}radius-circle); - --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-m); // default size - --#{$prefix}avatar-size-s: 1.5rem; // 24px - --#{$prefix}avatar-size-m: 2.5rem; // 32px - --#{$prefix}avatar-size-l: 3.5rem; // 48px - --#{$prefix}avatar-size-xl: 5rem; // 80px - --#{$prefix}avatar-size-xxl: 7rem; // 112px + --#{$prefix}avatar-size: 2.5rem; // default size - see '.size-' classes for other sizes --#{$prefix}avatar-dot-size: 10px; --#{$prefix}avatar-dot-border-size: 1.5px; --#{$prefix}avatar-dot-border-color: var(--#{$prefix}color-border-inverse); @@ -53,19 +48,19 @@ $avatar-variants: ( &.size-sm { --#{$prefix}avatar-font-size: 12px; --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-solid); - --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-s); + --#{$prefix}avatar-size: 1.5rem; --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xs); } &.size-md { - --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-3); - --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-m); + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-4); + --#{$prefix}avatar-size: 2.5rem; --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-s); } &.size-lg { - --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-4); - --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-l); + --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-5); + --#{$prefix}avatar-size: 3.5rem; --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-m); --#{$prefix}avatar-dot-offset-right: -2px; --#{$prefix}avatar-dot-size: 14px; @@ -73,7 +68,7 @@ $avatar-variants: ( &.size-xl { --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-8); - --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-xl); + --#{$prefix}avatar-size: 5rem; --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-l); --#{$prefix}avatar-dot-offset-right: 6px; --#{$prefix}avatar-dot-size: 16px; @@ -81,7 +76,7 @@ $avatar-variants: ( &.size-xxl { --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-10); - --#{$prefix}avatar-size: var(--#{$prefix}avatar-size-xxl); + --#{$prefix}avatar-size: 7rem; --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-xl); --#{$prefix}avatar-dot-offset-right: 10px; --#{$prefix}avatar-dot-size: 20px; From 9d78eb5995e5f3c6a4fea031051cdcee0721383f Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 16 Jan 2025 11:34:58 +0100 Subject: [PATCH 40/59] refactor: avatar dropdown, hover and group --- src/scss/components/_avatar.scss | 299 +++++++++++++------------------ 1 file changed, 125 insertions(+), 174 deletions(-) diff --git a/src/scss/components/_avatar.scss b/src/scss/components/_avatar.scss index 02f1a6d3d..35ce92b7d 100644 --- a/src/scss/components/_avatar.scss +++ b/src/scss/components/_avatar.scss @@ -7,17 +7,16 @@ $avatar-variants: ( secondary: $color-secondary ); -// Avatar local variables +// Avatar properties .avatar { --#{$prefix}avatar-background: var(--#{$prefix}color-background-secondary-lighter); --#{$prefix}avatar-text-color: var(--#{$prefix}color-text-secondary); --#{$prefix}avatar-font-size: var(--#{$prefix}font-size-2); - --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-base); --#{$prefix}avatar-icon-size: var(--#{$prefix}icon-size-s); --#{$prefix}avatar-radius: var(--#{$prefix}radius-circle); --#{$prefix}avatar-size: 2.5rem; // default size - see '.size-' classes for other sizes - --#{$prefix}avatar-dot-size: 10px; - --#{$prefix}avatar-dot-border-size: 1.5px; + --#{$prefix}avatar-dot-size: 12px; + --#{$prefix}avatar-dot-border-size: 2px; --#{$prefix}avatar-dot-border-color: var(--#{$prefix}color-border-inverse); --#{$prefix}avatar-dot-offset-right: 0; --#{$prefix}avatar-dot-offset-top: 0; @@ -25,16 +24,16 @@ $avatar-variants: ( } .avatar { + position: relative; + z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--#{$prefix}avatar-size); height: var(--#{$prefix}avatar-size); - overflow: hidden; border-radius: var(--#{$prefix}avatar-radius); background: var(--#{$prefix}avatar-background); color: var(--#{$prefix}avatar-text-color); - font-weight: var(--#{$prefix}avatar-font-weight); transition: background-color 0.2s; // Avatar color variants @@ -46,6 +45,7 @@ $avatar-variants: ( } &.size-sm { + --#{$prefix}avatar-dot-border-size: 1px; --#{$prefix}avatar-font-size: 12px; --#{$prefix}avatar-font-weight: var(--#{$prefix}font-weight-solid); --#{$prefix}avatar-size: 1.5rem; @@ -82,97 +82,16 @@ $avatar-variants: ( --#{$prefix}avatar-dot-size: 20px; } - // Avatar image - img { - width: 100%; - height: 100%; - transition: filter 0.2s; - object-fit: cover; - object-position: center; - } - - // Avatar first letters - p { - margin: 0; - font-size: var(--#{$prefix}avatar-font-size); - } - - // Avatar icons - .icon { - width: var(--#{$prefix}avatar-icon-size); - height: var(--#{$prefix}avatar-icon-size); - } - - &.avatar-dropdown { - position: relative; - overflow: visible; - - .dropdown { - position: absolute; - top: 0; - right: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - border: 0; - } - - .btn-dropdown { - padding: 0; - color: inherit; - font-size: 0.75rem; - line-height: 0; - } - - .list-item { - display: flex; - align-items: center; - padding: 0 16px; - font-size: 0.875rem; - } - - .link-list { - white-space: nowrap; - - span { - line-height: 1em; - } - - li { - margin-bottom: 16px; - &:last-child { - margin-bottom: 0; - } - } - - .avatar { - margin-right: 16px; - - &.size-sm { - margin-right: 12px; - } - - p { - color: $white !important; - } - } - } - - .dropdown-menu { - margin-left: -27px !important; - } - } - &-wrapper { position: relative; + z-index: 1; } &-presence, &-status { position: absolute; right: var(--#{$prefix}avatar-dot-offset-right); + z-index: 10; display: flex; align-items: center; justify-content: center; @@ -224,93 +143,152 @@ $avatar-variants: ( &-status.notify { background: var(--#{$prefix}theme-primary); } -} - -a.avatar { - filter: brightness(100%); + // Avatar image + img { + width: 100%; + height: 100%; + border-radius: var(--#{$prefix}avatar-radius); + object-fit: cover; + object-position: center; + } - &:hover { - background: shade-color($color-background-secondary-lighter, 5%); + // Avatar first letters + p { + margin: 0; + color: var(--#{$prefix}avatar-text-color); + font-size: var(--#{$prefix}avatar-font-size); + } - img { - filter: brightness(90%); - } + // Avatar icon + .icon { + width: var(--#{$prefix}avatar-icon-size); + height: var(--#{$prefix}avatar-icon-size); + } - &.avatar-primary { - background: shade-color($primary, 5%); - } +// Avatar sibling span text + & ~ span { + margin-left: var(--#{$prefix}spacing-inline-xs); + } +} - &.avatar-secondary { - background: shade-color($secondary, 5%); - } +// Hover on avatar +a.avatar, +a .avatar { + text-decoration: none; - &.avatar-green { - background: shade-color($green, 5%); - } + &::after { + position: absolute; + top: 0; + right: 0; + z-index: 10; + content: ''; + display: block; + width: 100%; + height: 100%; + border-radius: var(--#{$prefix}avatar-radius); + opacity: 0; + background: var(--#{$prefix}color-background-emphasis); + transition: opacity 0.2s; + } - &.avatar-orange { - background: shade-color($orange, 5%); - } + &:hover p { + color: var(--bs-avatar-text-color); + } - &.avatar-red { - background: shade-color($red, 12%); - } + &:hover::after { + opacity: 0.5; } } +// Avatar dropdown .avatar-dropdown { - &:hover, - &:focus-within { - background: shade-color($color-background-secondary-lighter, 5%); + position: relative; + overflow: visible; + + .dropdown { + position: absolute; + top: 0; + right: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + border: 0; } - .btn-dropdown:focus { - box-shadow: none; + .dropdown-menu { + margin-left: -27px; } -} + + .btn-dropdown { + padding: 0; + color: inherit; + font-size: var(--#{$prefix}label-font-size-xs); + line-height: 0; -.avatar-wrapper { + &:focus { + box-shadow: none; + } + } - &.avatar-extra-text { - display: inline-flex; + .list-item { + display: flex; align-items: center; - justify-content: flex-start; - margin-bottom: 16px; + font-size: var(--#{$prefix}font-size-1); + } - .avatar { - flex-shrink: 0; + .link-list { + white-space: nowrap; + + li { + margin-bottom: 16px; + &:last-child { + margin-bottom: 0; + } } + } +} - .extra-text { - margin-left: 16px; - line-height: 1.2em; +.avatar-extra-text { + display: inline-flex; + align-items: center; + justify-content: flex-start; + margin-bottom: 16px; - h3, - h4 { - margin: 0; - font-size: 1.125rem; - font-weight: 600; + .avatar { + flex-shrink: 0; + } - a { - display: inline-block; - } - } + .extra-text { + margin-left: var(--#{$prefix}spacing-inline-s); - p, - time { - margin: 0; - font-size: 0.75rem; - text-transform: uppercase; + h3, + h4 { + margin: 0; + font-size: var(--#{$prefix}font-size-2); + + a { + display: inline-block; } } + + p, + time { + margin: 0; + color: var(--#{$prefix}color-text-secondary); + font-size: var(--#{$prefix}caption-font-size); + text-transform: uppercase; + } } } .avatar-group { & > li { - margin-bottom: 16px; - line-height: 1; + margin-bottom: var(--#{$prefix}spacing-stack-s); + line-height: auto; + &:last-child { margin-bottom: 0; } @@ -319,35 +297,6 @@ a.avatar { display: inline-flex; align-items: center; padding: 0; - line-height: 1em; - .avatar { - margin-right: 12px; - - p { - font-size: 1rem; - } - - &.avatar-primary, - &.avatar-secondary, - &.avatar-green, - &.avatar-orange, - &.avatar-red { - p { - color: $white; - line-height: 0; - } - } - } - - span { - margin: 0; - font-size: 0.875rem; - font-weight: 600; - } - } - - a.list-item span { - text-decoration: underline; } } } @@ -359,9 +308,11 @@ a.avatar { justify-content: flex-start; margin: 0; padding: 0; + li { list-style-type: none; line-height: 0; + & > .avatar { margin-left: -6px; border: 2px solid $white; From 2274858e7ab254ce4c52cb0a95e4b892933cbc60 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 16 Jan 2025 11:35:20 +0100 Subject: [PATCH 41/59] feat: add backgroun inverse on hover --- src/scss/base/_root.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss index f97bb2cc9..d7386032a 100644 --- a/src/scss/base/_root.scss +++ b/src/scss/base/_root.scss @@ -107,7 +107,7 @@ --#{$prefix}font-size-4: var(--dsi-font-size-4); --#{$prefix}font-size-3: var(--dsi-font-size-3); --#{$prefix}font-size-2: var(--dsi-font-size-2); - --#{$prefix}font-size-1: var(--dsi-font-size-1); + --#{$prefix}font-size-1: var(--dsi-font-size-1); --#{$prefix}font-line-height-5: var(--dsi-font-line-height-5); --#{$prefix}font-line-height-4: var(--dsi-font-line-height-4); --#{$prefix}font-line-height-3: var(--dsi-font-line-height-3); @@ -237,6 +237,7 @@ --#{$prefix}color-background-subtle: var(--dsi-color-background-subtle); --#{$prefix}color-background-disabled: var(--dsi-color-background-disabled); --#{$prefix}color-background-inverse: var(--dsi-color-background-inverse); + --#{$prefix}color-background-inverse-hover: var(--dsi-color-slate-93); // TODO: replace with semantic token --#{$prefix}color-background-muted: var(--dsi-color-background-muted); --#{$prefix}color-background-accent-hover: var(--dsi-color-background-accent-hover); --#{$prefix}color-background-accent: var(--dsi-color-background-accent); From adcda9f27db53690bc66178f95045572269ea410 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 16 Jan 2025 11:35:45 +0100 Subject: [PATCH 42/59] fix: back-to-top props name --- src/scss/components/_back-to-top.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/scss/components/_back-to-top.scss b/src/scss/components/_back-to-top.scss index 5893fdbc4..92aa3fcac 100644 --- a/src/scss/components/_back-to-top.scss +++ b/src/scss/components/_back-to-top.scss @@ -1,15 +1,15 @@ .back-to-top { - --#{$prefix}back-to-top-bg: var(--#{$prefix}color-background-primary); - --#{$prefix}back-to-top-bg-position: 1rem; + --#{$prefix}back-to-top-background: var(--#{$prefix}color-background-primary); + --#{$prefix}back-to-top-position: 1rem; --#{$prefix}back-to-top-radius: var(--#{$prefix}radius-circle); --#{$prefix}back-to-top-sizing: 2.5rem; } .back-to-top { position: fixed; - bottom: var(--#{$prefix}back-to-top-bg-position); - right: var(--#{$prefix}back-to-top-bg-position); - background: var(--#{$prefix}color-background-primary); + bottom: var(--#{$prefix}back-to-top-position); + right: var(--#{$prefix}back-to-top-position); + background: var(--#{$prefix}back-to-top-background); width: var(--#{$prefix}back-to-top-sizing); height: var(--#{$prefix}back-to-top-sizing); text-decoration: none; @@ -38,7 +38,7 @@ } &:hover { - --back-to-top-bg: var(--#{$prefix}color-background-primary-hover ); + --back-to-top-background: var(--#{$prefix}color-background-primary-hover ); text-decoration: none; } @@ -82,9 +82,9 @@ // Dark version &.dark { - --#{$prefix}back-to-top-bg: var(--#{$prefix}color-background-inverse); + --#{$prefix}back-to-top-background: var(--#{$prefix}color-background-inverse); &:hover { - --#{$prefix}back-to-top-bg: var(--dsi-color-slate-93); + --#{$prefix}back-to-top-background: var(--#{$prefix}color-background-inverse-hover); } .icon { From 80f2577456a5a817bd4c305b4e12fd37c31b162a Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 16 Jan 2025 12:03:58 +0100 Subject: [PATCH 43/59] fix: apply type style to different tag --- src/scss/components/_linklist.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/components/_linklist.scss b/src/scss/components/_linklist.scss index 42c03e0c5..12f299b6a 100644 --- a/src/scss/components/_linklist.scss +++ b/src/scss/components/_linklist.scss @@ -38,9 +38,9 @@ padding-left: $link-list-h-pad; } li { + font-size: $link-list-font-size; + line-height: $link-list-line-height; a { - font-size: $link-list-font-size; - line-height: $link-list-line-height; display: block; padding: 0.25rem $link-list-h-pad; text-decoration: none; From f8bd5efda8b382361a014d60613d8769275c33d2 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 16 Jan 2025 12:04:17 +0100 Subject: [PATCH 44/59] refactor: postcss and beautify --- src/scss/components/_linklist.scss | 117 +++++++++++++++++++++-------- 1 file changed, 85 insertions(+), 32 deletions(-) diff --git a/src/scss/components/_linklist.scss b/src/scss/components/_linklist.scss index 12f299b6a..f7c94ab19 100644 --- a/src/scss/components/_linklist.scss +++ b/src/scss/components/_linklist.scss @@ -1,172 +1,210 @@ //mobile .link-list-wrapper { + .list-item-title, .link-list-heading { font-size: $link-list-heading-size; } + .link-list-heading { - color: $color-text-base; + margin-bottom: $link-list-divider-distance; padding: 0 $link-list-h-pad; + color: $color-text-base; font-weight: 600; - margin-bottom: $link-list-divider-distance; line-height: 1.25; + a { + position: relative; + display: block; padding: 0; font-size: $link-list-font-size; line-height: $link-list-line-height; - display: block; - position: relative; text-decoration: none; } } + h3 { - font-size: $link-list-heading-size; - color: $color-text-base; padding: 0 $link-list-h-pad; + color: $color-text-base; + font-size: $link-list-heading-size; font-weight: 600; + a { - line-height: inherit; - font-size: 1rem; padding: 0; + font-size: 1rem; + line-height: inherit; } } + ul { padding: 0; list-style-type: none; + // sottolista &.link-sublist { padding-left: $link-list-h-pad; } + li { font-size: $link-list-font-size; line-height: $link-list-line-height; + a { + position: relative; display: block; padding: 0.25rem $link-list-h-pad; text-decoration: none; - position: relative; + &.icon-right, &.icon-left { - padding-left: 0; - padding-right: 0; padding-top: $link-list-v-pad; + padding-right: 0; padding-bottom: $link-list-v-pad; - & + ul { + padding-left: 0; + + &+ul { padding-left: 0; } } + &.icon-right { .list-item-title-icon-wrapper { justify-content: space-between; margin-right: 0; } } + &[data-bs-toggle] { .icon { transition: transform 0.3s; } } + &[aria-expanded='true'] { .icon { transform: scale(-1); } } + // hover state &:hover:not(.disabled) { text-decoration: none; + span { color: $primary; text-decoration: underline; } + p { color: $color-text-secondary; text-decoration: none; } + .icon { fill: $primary; } } + &.disabled:hover { text-decoration: none; } + // weight variation &.medium { font-weight: 600; } + span { - color: $primary; display: inline-block; margin-right: $link-list-h-pad; + color: $primary; line-height: normal; } + .icon { display: inline-block; flex-shrink: 0; } + .list-item-title-icon-wrapper { display: flex; align-items: center; + .list-item-title { margin-right: $link-list-h-pad; } } + // icone destre dentro link &.right-icon { .list-item-title-icon-wrapper { - padding-right: 0; - margin-right: 0; justify-content: space-between; + margin-right: 0; + padding-right: 0; } + .icon { transition: transform $dropdown-menu-animation-speed; + &.secondary { color: $icon-secondary; } } } + // variazione icone a collapse aperto &.right-icon[aria-expanded='true'] { .icon.right { transform: scaleY(-1); } } + &.active { span { color: $color-text-primary-active; } + .icon { color: $color-text-primary-active; } } + &.disabled { cursor: not-allowed; + span { color: $gray-label-disabled; } + svg { fill: $gray-disabled; + &.secondary { fill: $gray-disabled; } } } + &.large { font-size: $link-list-font-size-l; } + // paragrafo dentro link p { + color: $color-text-secondary; font-size: $link-list-paragraph-size; line-height: initial; - color: $color-text-secondary; } + //avatar &.avatar { display: flex; margin-bottom: $link-list-avatar-margin; + .avatar { display: block; - border-radius: $link-list-avatar-radius; margin-right: $link-list-left-icon-space; + border-radius: $link-list-avatar-radius; } } @@ -176,38 +214,43 @@ margin-right: $v-gap; } } + &.icon-left, &.left-icon { p { width: 100%; } + .icon { left: 0; - margin-left: 0; flex-shrink: 0; + margin-left: 0; } } } } } + .divider { display: block; height: $link-list-divider-height; - background: $color-border-subtle; margin: $link-list-divider-distance 0; + background: $color-border-subtle; } + //toggles .toggles { label { - padding: 0 $link-list-h-pad; - font-size: $link-list-font-size; - line-height: $link-list-line-height; justify-content: space-between; height: auto; - font-weight: inherit; margin: 0; + padding: 0 $link-list-h-pad; + font-size: $link-list-font-size; + font-weight: inherit; + line-height: $link-list-line-height; } - input[type='checkbox'] + .lever { + + input[type='checkbox']+.lever { margin: $link-list-toggle-margin 0 0; } } @@ -217,31 +260,37 @@ &.form-check-group { padding: 0 $link-list-h-pad; box-shadow: none; - [type='checkbox'] + label { + + [type='checkbox']+label { + height: inherit; + margin-bottom: 0; padding-left: 0; font-size: $link-list-font-size; line-height: $link-list-line-height; - height: inherit; - margin-bottom: 0; + &:after { right: $link-list-h-pad; } + &:before { right: $link-list-checkbox-icon-right; } } - [type='checkbox'][disabled] + label { + + [type='checkbox'][disabled]+label { color: $color-text-secondary; } } } } + &.multiline { .list-item-title-icon-wrapper { justify-content: space-between; margin-bottom: calc($v-gap / 2); padding: 0; } + .list-item { &.icon-right { .list-item-title-icon-wrapper { @@ -251,6 +300,7 @@ } } } + //small - tablet @include media-breakpoint-up(sm) { .link-list-wrapper ul li a.large { @@ -263,6 +313,7 @@ //Tablet vertical @include media-breakpoint-up(md) { .link-list-wrapper ul li a.large { + &.icon-left, &.icon-right { padding-top: $link-list-v-padding-l; @@ -274,6 +325,7 @@ //Tablet horizontal / small desktop @include media-breakpoint-up(lg) { .link-list-wrapper { + // classe modificatore per menu laterale &.menu-link-list { position: relative; @@ -281,14 +333,15 @@ h3, h4 { position: relative; - padding: 1rem; margin-top: 0; + padding: 1rem; border-bottom: 4px solid $color-border-subtle; + &:after { - content: ''; position: absolute; - left: 0; bottom: -4px; + left: 0; + content: ''; width: 40px; height: 4px; background-color: $warning; @@ -296,4 +349,4 @@ } } } -} +} \ No newline at end of file From d0c39d1ec902f908bab61d18cb693a3c9149fff0 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 21 Jan 2025 11:47:38 +0100 Subject: [PATCH 45/59] refactor: linklist --- src/scss/base/_variables.scss | 18 - src/scss/components/_linklist.scss | 515 +++++++++++++---------------- 2 files changed, 227 insertions(+), 306 deletions(-) diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss index 9a6e2b422..6b7826d43 100644 --- a/src/scss/base/_variables.scss +++ b/src/scss/base/_variables.scss @@ -1664,24 +1664,6 @@ $navigation-light-megamenu-separator-color: $gray-border !default; // UI kit $inline-menu-line-width: 2px; $inline-menu-linklist-v-padding: 0.59em; -// Linklist -$link-list-font-size: 1rem; -$link-list-font-size-l: 1.125rem; -$link-list-line-height: 2rem; -$link-list-heading-size: 1.125rem; -$link-list-divider-height: 1px; -$link-list-divider-distance: 8px; -$link-list-h-pad: 24px; -$link-list-v-pad: 0.25em; -$link-list-paragraph-size: 0.875rem; -$link-list-left-icon-space: 8px; -$link-list-avatar-radius: 50px; -$link-list-avatar-margin: 8px; -$link-list-checkbox-icon-right: 35px; -$link-list-toggle-margin: 8px; -$link-list-icon-v-padding: 5px; -$link-list-v-padding-l: 0.45em; -$link-list-hover-color: $primary-a5 !default; // TODO: Not used, consider to remove it // Megamenu $megamenu-padding-top-desktop: $v-gap * 4; diff --git a/src/scss/components/_linklist.scss b/src/scss/components/_linklist.scss index f7c94ab19..5c36eb4dc 100644 --- a/src/scss/components/_linklist.scss +++ b/src/scss/components/_linklist.scss @@ -1,352 +1,291 @@ -//mobile .link-list-wrapper { - - .list-item-title, - .link-list-heading { - font-size: $link-list-heading-size; - } - - .link-list-heading { - margin-bottom: $link-list-divider-distance; - padding: 0 $link-list-h-pad; - color: $color-text-base; - font-weight: 600; - line-height: 1.25; - - a { - position: relative; - display: block; - padding: 0; - font-size: $link-list-font-size; - line-height: $link-list-line-height; - text-decoration: none; - } + --#{$prefix}list-divider-size: 1px; + --#{$prefix}list-heading-font-size: var(--#{$prefix}heading-6-font-size); + --#{$prefix}list-item-font-size: var(--#{$prefix}label-font-size); + --#{$prefix}list-item-line-height: var(--#{$prefix}label-line-height); + --#{$prefix}list-item-spacing: var(--#{$prefix}spacing-inset-s) var(--#{$prefix}spacing-inline-xs); + --#{$prefix}list-nested-spacing: var(--#{$prefix}spacing-inset-s); + // --#{$prefix}list-item-spacing-stack: var(--#{$prefix}spacing-stack-s); + + .link-list-heading, + h3 { + margin-bottom: var(--#{$prefix}spacing-stack-xs); + padding: 0 var(--#{$prefix}spacing-stack-xs); + color: var(--#{$prefix}color-text-base); + font-size: var(--#{$prefix}list-heading-font-size); + font-weight: var(--#{$prefix}heading-font-weight-weak); + line-height: var(--#{$prefix}heading-line-height); } h3 { - padding: 0 $link-list-h-pad; - color: $color-text-base; - font-size: $link-list-heading-size; - font-weight: 600; - - a { - padding: 0; - font-size: 1rem; - line-height: inherit; - } + padding: 0 var(--#{$prefix}spacing-inset-m); + color: var(--#{$prefix}color-text-base); } ul { padding: 0; list-style-type: none; - // sottolista &.link-sublist { - padding-left: $link-list-h-pad; + padding-left: var(--#{$prefix}list-nested-spacing); } + } - li { - font-size: $link-list-font-size; - line-height: $link-list-line-height; - - a { - position: relative; - display: block; - padding: 0.25rem $link-list-h-pad; - text-decoration: none; - - &.icon-right, - &.icon-left { - padding-top: $link-list-v-pad; - padding-right: 0; - padding-bottom: $link-list-v-pad; - padding-left: 0; + li a { + position: relative; + display: block; + padding: var(--#{$prefix}list-item-spacing); + font-size: var(--#{$prefix}list-item-font-size); + line-height: var(--#{$prefix}list-item-line-height); + text-decoration: none; + + &.active span, + &:hover:not(.disable) span { + text-decoration: underline; + } - &+ul { - padding-left: 0; - } - } + // List item active state + &.active { + span { + color: var(--#{$prefix}color-text-primary-active); + } - &.icon-right { - .list-item-title-icon-wrapper { - justify-content: space-between; - margin-right: 0; - } - } + .icon { + color: var(--#{$prefix}color-icon-primary-active); + } + } - &[data-bs-toggle] { - .icon { - transition: transform 0.3s; - } - } + // Hover on list item + &:hover:not(.disabled) { + span { + color: var(--#{$prefix}color-text-primary-hover); + } - &[aria-expanded='true'] { - .icon { - transform: scale(-1); - } - } + p { + color: var(--#{$prefix}color-text-secondary); + } - // hover state - &:hover:not(.disabled) { - text-decoration: none; + .icon { + fill: var(--#{$prefix}icon-primary-hover); + } + } - span { - color: $primary; - text-decoration: underline; - } + // List item disabled state + &.disabled { + cursor: not-allowed; - p { - color: $color-text-secondary; - text-decoration: none; - } + &:hover span { + text-decoration: none; + } - .icon { - fill: $primary; - } - } + span { + color: var(--#{$prefix}color-text-disabled); + } - &.disabled:hover { - text-decoration: none; - } + svg { + fill: var(--#{$prefix}icon-disabled); - // weight variation - &.medium { - font-weight: 600; + &.secondary { + fill: var(--#{$prefix}icon-disabled); } + } + } - span { - display: inline-block; - margin-right: $link-list-h-pad; - color: $primary; - line-height: normal; - } + // Change the list item link font weight + &.medium, + .list-item-title { + font-weight: var(--#{$prefix}font-weight-solid); + } - .icon { - display: inline-block; - flex-shrink: 0; - } + // Increase font-size and spacing for list item link with large class + &.large { + --#{$prefix}list-item-font-size: var(--#{$prefix}label-font-size-m); + } - .list-item-title-icon-wrapper { - display: flex; - align-items: center; + // Avatar position inside the list item + &.avatar { + display: flex; + margin-bottom: var(--#{$prefix}spacing-stack-xs); - .list-item-title { - margin-right: $link-list-h-pad; - } - } + .avatar { + display: block; + margin-right: var(--#{$prefix}spacing-inline-s); + } + } - // icone destre dentro link - &.right-icon { - .list-item-title-icon-wrapper { - justify-content: space-between; - margin-right: 0; - padding-right: 0; - } - - .icon { - transition: transform $dropdown-menu-animation-speed; - - &.secondary { - color: $icon-secondary; - } - } - } + // Icon left and right inside list item + &.icon-right, + &.icon-left { + padding-right: 0; + padding-left: 0; + } - // variazione icone a collapse aperto - &.right-icon[aria-expanded='true'] { - .icon.right { - transform: scaleY(-1); - } - } + // Icon left inside list item + &.list-item.icon-left { + .icon { + left: 0; + flex-shrink: 0; + margin-right: var(--#{$prefix}spacing-inline-xs); + } - &.active { - span { - color: $color-text-primary-active; - } + p { + width: 100%; + } + } - .icon { - color: $color-text-primary-active; - } + &.list-item.icon-right { + .list-item-title-icon-wrapper { + justify-content: space-between; + } + } + + &.right-icon { + .list-item-title-icon-wrapper { + justify-content: space-between; + } + + .icon { + transition: transform $dropdown-menu-animation-speed; + + &.secondary { + color: var(--#{$prefix}icon-secondary); } + } + } - &.disabled { - cursor: not-allowed; - - span { - color: $gray-label-disabled; - } - - svg { - fill: $gray-disabled; + &[data-bs-toggle] .icon { + transition: transform 0.3s; + } - &.secondary { - fill: $gray-disabled; - } - } - } + &[aria-expanded='true'] .icon { + transform: scale(-1); + } - &.large { - font-size: $link-list-font-size-l; - } + - // paragrafo dentro link - p { - color: $color-text-secondary; - font-size: $link-list-paragraph-size; - line-height: initial; - } + .icon { + display: inline-block; + flex-shrink: 0; + } - //avatar - &.avatar { - display: flex; - margin-bottom: $link-list-avatar-margin; + // TODO: Not used anywhere + // &.right-icon[aria-expanded='true'] .icon.right { + // transform: scaleY(-1); + // } - .avatar { - display: block; - margin-right: $link-list-left-icon-space; - border-radius: $link-list-avatar-radius; - } - } + .list-item-title-icon-wrapper { + display: flex; + align-items: center; - &.list-item { - &.icon-left { - .icon { - margin-right: $v-gap; - } - } - - &.icon-left, - &.left-icon { - p { - width: 100%; - } - - .icon { - left: 0; - flex-shrink: 0; - margin-left: 0; - } - } - } + .list-item-title { + margin-right: var(--#{$prefix}spacing-inline-m); } } - .divider { - display: block; - height: $link-list-divider-height; - margin: $link-list-divider-distance 0; - background: $color-border-subtle; + // Text paragraph inside multiline list item + p { + color: var(--#{$prefix}color-text-secondary); + font-size: var(--#{$prefix}caption-font-size); + line-height: var(--#{$prefix}caption-line-height); } - //toggles - .toggles { - label { - justify-content: space-between; - height: auto; - margin: 0; - padding: 0 $link-list-h-pad; - font-size: $link-list-font-size; - font-weight: inherit; - line-height: $link-list-line-height; - } - - input[type='checkbox']+.lever { - margin: $link-list-toggle-margin 0 0; - } + // Listed item label wrapped in the tag + span { + display: inline-block; + color: var(--#{$prefix}color-text-primary); } + } - //checkboxes - .form-check { - &.form-check-group { - padding: 0 $link-list-h-pad; - box-shadow: none; - - [type='checkbox']+label { - height: inherit; - margin-bottom: 0; - padding-left: 0; - font-size: $link-list-font-size; - line-height: $link-list-line-height; - - &:after { - right: $link-list-h-pad; - } - - &:before { - right: $link-list-checkbox-icon-right; - } - } + // Divider between list items + .divider { + display: block; + height: var(--#{$prefix}list-divider-size); + margin: var(--#{$prefix}spacing-stack-xs) 0; + background: var(--#{$prefix}color-border-subtle); + } - [type='checkbox'][disabled]+label { - color: $color-text-secondary; - } - } - } + .toggles label { + justify-content: space-between; + margin: 0; + padding: 0 var(--#{$prefix}spacing-inset-m); + font-size: var(--#{$prefix}body-font-size); } - &.multiline { - .list-item-title-icon-wrapper { - justify-content: space-between; - margin-bottom: calc($v-gap / 2); - padding: 0; - } + .toggles input[type='checkbox']+.lever { + margin-top: var(--#{$prefix}spacing-stack-xs); + } - .list-item { - &.icon-right { - .list-item-title-icon-wrapper { - margin-right: 0; - } + .form-check.form-check-group { + padding: 0 var(--#{$prefix}spacing-inset-m); + box-shadow: none; + + [type='checkbox']+label { + height: inherit; + margin-bottom: 0; + padding-left: 0; + font-size: var(--#{$prefix}body-font-size); + + &:after { + right: var(--#{$prefix}spacing-inset-m); + } + + &:before { + right: $link-list-checkbox-icon-right; } } + + [type='checkbox'][disabled]+label { + color: $color-text-secondary; + } } } -//small - tablet -@include media-breakpoint-up(sm) { - .link-list-wrapper ul li a.large { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-size: $link-list-font-size-l; +// Multiline list item +.multiline { + .list-item-title-icon-wrapper { + margin-bottom: var(--#{$prefix}spacing-stack-xxs); } -} -//Tablet vertical -@include media-breakpoint-up(md) { - .link-list-wrapper ul li a.large { + .list-item.icon-right .list-item-title-icon-wrapper { + margin-right: 0; + } - &.icon-left, - &.icon-right { - padding-top: $link-list-v-padding-l; - padding-bottom: $link-list-v-padding-l; + // List item label inside a multiline list item + .list-item-title { + font-size: var(--#{$prefix}label-font-size); + @include media-breakpoint-up(lg) { + font-size: var(--#{$prefix}label-font-size-m); } } } -//Tablet horizontal / small desktop -@include media-breakpoint-up(lg) { - .link-list-wrapper { - - // classe modificatore per menu laterale - &.menu-link-list { - position: relative; - - h3, - h4 { - position: relative; - margin-top: 0; - padding: 1rem; - border-bottom: 4px solid $color-border-subtle; - - &:after { - position: absolute; - bottom: -4px; - left: 0; - content: ''; - width: 40px; - height: 4px; - background-color: $warning; - } - } - } +@include media-breakpoint-up(md) { + .link-list-wrapper ul li a.large.icon-left, + .link-list-wrapper ul li a.large.icon-right { + --#{$prefix}list-item-spacing: var(--#{$prefix}spacing-inset-s); } -} \ No newline at end of file +} + +// @include media-breakpoint-up(lg) { +// .link-list-wrapper.menu-link-list { +// position: relative; + +// h3, +// h4 { +// position: relative; +// margin-top: 0; +// padding: 1rem; +// border-bottom: 4px solid var(--#{$prefix}color-border-subtle); + +// &:after { +// position: absolute; +// bottom: -4px; +// left: 0; +// content: ''; +// width: 40px; +// height: 4px; +// background-color: $warning; +// } +// } +// } +// } From 199d0a0b9acc5aedf282e83cc7621e28074b7fc6 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 21 Jan 2025 11:58:07 +0100 Subject: [PATCH 46/59] feat: add tokens locally (temp) --- src/scss/base/_root.scss | 317 ++++++++++++++++++++++++++++++++- src/scss/bootstrap-italia.scss | 2 +- 2 files changed, 313 insertions(+), 6 deletions(-) diff --git a/src/scss/base/_root.scss b/src/scss/base/_root.scss index d7386032a..dfaed4714 100644 --- a/src/scss/base/_root.scss +++ b/src/scss/base/_root.scss @@ -1,4 +1,305 @@ :root { + --dsi-icon-size-xl: 64px; + --dsi-icon-size-l: 48px; + --dsi-icon-size-m: 32px; + --dsi-icon-size-s: 24px; + --dsi-icon-size-xs: 16px; + --dsi-sizing-full: 100%; + --dsi-sizing-two-thirds: 75%; + --dsi-sizing-half: 50%; + --dsi-sizing-quarter: 25%; + --dsi-shadow-l-type: ''; + --dsi-shadow-l-color: rgba(0,0,0,.15); + --dsi-shadow-l-spread: 0; + --dsi-shadow-l-blur: 48px; + --dsi-shadow-l-y: 16px; + --dsi-shadow-l-x: 0; + --dsi-shadow-m-type: ''; + --dsi-shadow-m-color: rgba(0,0,0,.15); + --dsi-shadow-m-spread: 0; + --dsi-shadow-m-blur: 16px; + --dsi-shadow-m-y: 8px; + --dsi-shadow-m-x: 0; + --dsi-shadow-s-type: ''; + --dsi-shadow-s-color: rgba(0,0,0,.15); + --dsi-shadow-s-spread: 0; + --dsi-shadow-s-blur: 4px; + --dsi-shadow-s-y: 4px; + --dsi-shadow-s-x: 0; + --dsi-spacing-24x: 96px; + --dsi-spacing-16x: 64px; + --dsi-spacing-14x: 56px; + --dsi-spacing-12x: 48px; + --dsi-spacing-10x: 40px; + --dsi-spacing-8x: 32px; + --dsi-spacing-6x: 24px; + --dsi-spacing-5x: 20px; + --dsi-spacing-4x: 16px; + --dsi-spacing-3x: 12px; + --dsi-spacing-2x: 8px; + --dsi-spacing-1x: 4px; + --dsi-radius-rounded: 40px; + --dsi-radius-circle: 80px; + --dsi-radius-smooth: 4px; + --dsi-font-weight-bold: 700; + --dsi-font-weight-semibold: 600; + --dsi-font-weight-regular: 400; + --dsi-font-weight-light: 300; + --dsi-font-weight-extra-light: 200; + --dsi-font-tracking-normal: 0px; + --dsi-font-tracking-tight: -2px; + --dsi-font-tracking-narrow: -1.3px; + --dsi-font-tracking-short: -1px; + --dsi-font-line-height-5: 150%; + --dsi-font-line-height-4: 140%; + --dsi-font-line-height-3: 130%; + --dsi-font-line-height-2: 120%; + --dsi-font-line-height-1: 110%; + --dsi-font-size-11: 56px; + --dsi-font-size-10: 48px; + --dsi-font-size-9: 40px; + --dsi-font-size-8: 32px; + --dsi-font-size-7: 28px; + --dsi-font-size-6: 24px; + --dsi-font-size-5: 20px; + --dsi-font-size-4: 18px; + --dsi-font-size-3: 16px; + --dsi-font-size-2: 14px; + --dsi-font-size-1: 12px; + --dsi-font-mono: 'Roboto Mono'; + --dsi-font-serif: 'Lora'; + --dsi-font-sans: 'Titillium Web'; + --dsi-color-teal-90: #ccfffd; + --dsi-color-teal-80: #a3f5f2; + --dsi-color-teal-70: #79ece8; + --dsi-color-teal-60: #52e0db; + --dsi-color-teal-50: #2bd6d0; + --dsi-color-teal-42: #0bcbc5; + --dsi-color-teal-36: #09afa9; + --dsi-color-teal-32: #089994; + --dsi-color-teal-26: #077f7b; + --dsi-color-teal-20: #05615e; + --dsi-color-orange-87: #f6e4c8; + --dsi-color-orange-77: #eecd9a; + --dsi-color-orange-67: #e7b66e; + --dsi-color-orange-57: #e0a243; + --dsi-color-orange-48: #d48d22; + --dsi-color-orange-40: #cc7a00; + --dsi-color-orange-35: #b36b00; + --dsi-color-orange-30: #995c00; + --dsi-color-orange-25: #804d00; + --dsi-color-orange-20: #663d00; + --dsi-color-emerald-87: #c8f6e7; + --dsi-color-emerald-77: #99eed2; + --dsi-color-emerald-67: #6ee7bf; + --dsi-color-emerald-57: #43e0ac; + --dsi-color-emerald-48: #22d499; + --dsi-color-emerald-40: #00cc88; + --dsi-color-emerald-35: #00b377; + --dsi-color-emerald-25: #008055; + --dsi-color-emerald-20: #006644; + --dsi-color-emerald-15: #004d33; + --dsi-color-red-96: #fbeff1; + --dsi-color-red-90: #f5d6db; + --dsi-color-red-80: #ebadb8; + --dsi-color-red-70: #e08593; + --dsi-color-red-60: #d65c70; + --dsi-color-red-50: #cc334d; + --dsi-color-red-44: #b32d43; + --dsi-color-red-37: #992639; + --dsi-color-red-30: #7a1f2e; + --dsi-color-red-25: #661a26; + --dsi-color-gray-98: #fafafa; + --dsi-color-gray-96: #f5f5f5; + --dsi-color-gray-90: #e5e5e5; + --dsi-color-gray-83: #d4d4d4; + --dsi-color-gray-64: #a3a3a3; + --dsi-color-gray-45: #737373; + --dsi-color-gray-32: #525252; + --dsi-color-gray-25: #404040; + --dsi-color-gray-15: #262626; + --dsi-color-gray-10: #1a1a1a; + --dsi-color-slate-93: #ebeced; + --dsi-color-slate-85: #d9dadb; + --dsi-color-slate-78: #c5c7c9; + --dsi-color-slate-68: #a3adb7; + --dsi-color-slate-62: #929da9; + --dsi-color-slate-52: #768594; + --dsi-color-slate-44: #5c6f82; + --dsi-color-slate-36: #455b71; + --dsi-color-slate-28: #2f475e; + --dsi-color-slate-20: #17324d; + --dsi-color-seagreen-92: #E1F2EC; + --dsi-color-seagreen-84: #C8E4DB; + --dsi-color-seagreen-76: #AFD7CA; + --dsi-color-seagreen-69: #96CAB9; + --dsi-color-seagreen-54: #64AF96; + --dsi-color-seagreen-39: #329574; + --dsi-color-seagreen-24: #007A52; + --dsi-color-seagreen-19: #006242; + --dsi-color-seagreen-14: #004931; + --dsi-color-seagreen-10: #003121; + --dsi-color-blue-97: #f2f7fc; + --dsi-color-blue-87: #bfdfff; + --dsi-color-blue-77: #94c4f5; + --dsi-color-blue-67: #6aaaeb; + --dsi-color-blue-57: #4392e0; + --dsi-color-blue-48: #207ad5; + --dsi-color-blue-40: #0066cc; + --dsi-color-blue-30: #004d99; + --dsi-color-blue-25: #004080; + --dsi-color-blue-20: #003366; + --dsi-color-white: #ffffff; + --dsi-color-black: #000000; + --dsi-border-broad: 8px; + --dsi-border-thick: 4px; + --dsi-border-double: 2px; + --dsi-border-base: 1px; + --dsi-label-font-size-m: var(--dsi-font-size-4); + --dsi-label-font-size: var(--dsi-font-size-3); + --dsi-label-font-size-s: var(--dsi-font-size-2); + --dsi-label-font-size-xs: var(--dsi-font-size-1); + --dsi-theme-italia-deep: var(--dsi-color-blue-20); + --dsi-theme-italia-muted: var(--dsi-color-blue-25); + --dsi-theme-italia-lighter: var(--dsi-color-blue-97); + --dsi-theme-italia-light: var(--dsi-color-blue-87); + --dsi-theme-italia-base: var(--dsi-color-blue-40); + --dsi-lead-font-size-l: var(--dsi-font-size-6); + --dsi-lead-font-size: var(--dsi-font-size-5); + --dsi-caption-font-size: var(--dsi-font-size-2); + --dsi-body-font-size-l: var(--dsi-font-size-4); + --dsi-body-font-size: var(--dsi-font-size-3); + --dsi-heading-6-font-size-l: var(--dsi-font-size-4); + --dsi-heading-6-font-size: var(--dsi-font-size-3); + --dsi-heading-5-font-size-l: var(--dsi-font-size-6); + --dsi-heading-5-font-size: var(--dsi-font-size-5); + --dsi-heading-4-font-size-l: var(--dsi-font-size-7); + --dsi-heading-4-font-size: var(--dsi-font-size-6); + --dsi-heading-3-font-size: var(--dsi-font-size-7); + --dsi-heading-3-font-size-l: var(--dsi-font-size-8); + --dsi-heading-2-font-size-l: var(--dsi-font-size-9); + --dsi-heading-2-font-size: var(--dsi-font-size-8); + --dsi-heading-1-font-size-l: var(--dsi-font-size-10); + --dsi-heading-1-font-size: var(--dsi-font-size-9); + --dsi-lead-line-height: var(--dsi-font-line-height-3); + --dsi-caption-line-height: var(--dsi-font-line-height-3); + --dsi-body-line-height: var(--dsi-font-line-height-5); + --dsi-heading-line-height: var(--dsi-font-line-height-2); + --dsi-heading-font-weight-weak: var(--dsi-font-weight-semibold); + --dsi-heading-font-weight: var(--dsi-font-weight-bold); + --dsi-data-font: var(--dsi-font-mono); + --dsi-code-font: var(--dsi-font-mono); + --dsi-font-line-height-tight: var(--dsi-font-line-height-1); + --dsi-spacing-inset-3xl: var(--dsi-spacing-24x); + --dsi-spacing-inset-xxl: var(--dsi-spacing-12x); + --dsi-spacing-inset-xl: var(--dsi-spacing-10x); + --dsi-spacing-inset-l: var(--dsi-spacing-8x); + --dsi-spacing-inset-m: var(--dsi-spacing-6x); + --dsi-spacing-inset-s: var(--dsi-spacing-4x); + --dsi-spacing-inset-xs: var(--dsi-spacing-2x); + --dsi-spacing-inline-l: var(--dsi-spacing-8x); + --dsi-spacing-inline-m: var(--dsi-spacing-6x); + --dsi-spacing-inline-s: var(--dsi-spacing-4x); + --dsi-spacing-inline-xs: var(--dsi-spacing-2x); + --dsi-spacing-inline-xxs: var(--dsi-spacing-1x); + --dsi-spacing-stack-xxl: var(--dsi-spacing-12x); + --dsi-spacing-stack-xl: var(--dsi-spacing-10x); + --dsi-spacing-stack-l: var(--dsi-spacing-8x); + --dsi-spacing-stack-m: var(--dsi-spacing-6x); + --dsi-spacing-stack-s: var(--dsi-spacing-4x); + --dsi-spacing-stack-xs: var(--dsi-spacing-2x); + --dsi-color-outline-focus: var(--dsi-color-gray-10); + --dsi-color-text-accent: var(--dsi-color-teal-32); + --dsi-color-text-inverse: var(--dsi-color-white); + --dsi-color-text-danger-active: var(--dsi-color-red-25); + --dsi-color-text-danger-hover: var(--dsi-color-red-37); + --dsi-color-text-danger: var(--dsi-color-red-50); + --dsi-color-text-warning-active: var(--dsi-color-orange-20); + --dsi-color-text-warning-hover: var(--dsi-color-orange-25); + --dsi-color-text-warning: var(--dsi-color-orange-30); + --dsi-color-text-success-active: var(--dsi-color-emerald-15); + --dsi-color-text-success-hover: var(--dsi-color-emerald-20); + --dsi-color-text-success: var(--dsi-color-emerald-25); + --dsi-color-text-disabled: var(--dsi-color-slate-44); + --dsi-color-text-muted: var(--dsi-color-slate-44); + --dsi-color-text-secondary-active: var(--dsi-color-slate-20); + --dsi-color-text-secondary-hover: var(--dsi-color-slate-20); + --dsi-color-text-secondary: var(--dsi-color-slate-28); + --dsi-color-text-primary-active: var(--dsi-color-blue-20); + --dsi-color-text-primary-hover: var(--dsi-color-blue-30); + --dsi-color-text-primary: var(--dsi-color-blue-40); + --dsi-color-text-base: var(--dsi-color-gray-10); + --dsi-color-border-danger-active: var(--dsi-color-red-25); + --dsi-color-border-danger-hover: var(--dsi-color-red-37); + --dsi-color-border-danger: var(--dsi-color-red-50); + --dsi-color-border-warning-active: var(--dsi-color-orange-20); + --dsi-color-border-warning-hover: var(--dsi-color-orange-25); + --dsi-color-border-warning: var(--dsi-color-orange-30); + --dsi-color-border-success-active: var(--dsi-color-emerald-15); + --dsi-color-border-success-hover: var(--dsi-color-emerald-20); + --dsi-color-border-success: var(--dsi-color-emerald-25); + --dsi-color-border-subtle: var(--dsi-color-slate-78); + --dsi-color-border-disabled: var(--dsi-color-slate-85); + --dsi-color-border-inverse: var(--dsi-color-white); + --dsi-color-border-secondary-active: var(--dsi-color-slate-20); + --dsi-color-border-secondary-hover: var(--dsi-color-slate-28); + --dsi-color-border-secondary: var(--dsi-color-slate-44); + --dsi-color-border-primary-active: var(--dsi-color-blue-20); + --dsi-color-border-primary-hover: var(--dsi-color-blue-30); + --dsi-color-border-primary: var(--dsi-color-blue-40); + --dsi-color-background-danger-active: var(--dsi-color-red-25); + --dsi-color-background-danger-hover: var(--dsi-color-red-37); + --dsi-color-background-danger-light: var(--dsi-color-red-96); + --dsi-color-background-danger: var(--dsi-color-red-50); + --dsi-color-background-warning-active: var(--dsi-color-orange-20); + --dsi-color-background-warning-hover: var(--dsi-color-orange-25); + --dsi-color-background-warning-light: var(--dsi-color-orange-87); + --dsi-color-background-warning: var(--dsi-color-orange-30); + --dsi-color-background-success-active: var(--dsi-color-emerald-15); + --dsi-color-background-success-hover: var(--dsi-color-emerald-20); + --dsi-color-background-success-light: var(--dsi-color-emerald-87); + --dsi-color-background-success: var(--dsi-color-emerald-25); + --dsi-color-background-emphasis: var(--dsi-color-slate-20); + --dsi-color-background-subtle: var(--dsi-color-gray-83); + --dsi-color-background-disabled: var(--dsi-color-slate-85); + --dsi-color-background-inverse: var(--dsi-color-white); + --dsi-color-background-muted: var(--dsi-color-gray-96); + --dsi-color-background-accent-hover: var(--dsi-color-teal-26); + --dsi-color-background-accent: var(--dsi-color-teal-32); + --dsi-color-background-secondary-lighter: var(--dsi-color-slate-85); + --dsi-color-background-secondary-light: var(--dsi-color-slate-68); + --dsi-color-background-secondary-active: var(--dsi-color-slate-20); + --dsi-color-background-secondary-hover: var(--dsi-color-slate-28); + --dsi-color-background-secondary: var(--dsi-color-slate-44); + --dsi-color-background-primary-dark: var(--dsi-color-blue-20); + --dsi-color-background-primary-muted: var(--dsi-color-blue-30); + --dsi-color-background-primary-active: var(--dsi-color-blue-20); + --dsi-color-background-primary-hover: var(--dsi-color-blue-30); + --dsi-color-background-primary-lighter: var(--dsi-color-blue-97); + --dsi-color-background-primary-light: var(--dsi-color-blue-87); + --dsi-color-background-primary: var(--dsi-color-blue-40); + --dsi-icon-inverse: var(--dsi-color-background-inverse); + --dsi-icon-danger-active: var(--dsi-color-background-danger-active); + --dsi-icon-danger-hover: var(--dsi-color-background-danger-hover); + --dsi-icon-danger: var(--dsi-color-background-danger); + --dsi-icon-disabled: var(--dsi-color-background-disabled); + --dsi-icon-warning-active: var(--dsi-color-background-warning-active); + --dsi-icon-warning-hover: var(--dsi-color-background-warning-hover); + --dsi-icon-warning: var(--dsi-color-background-warning); + --dsi-icon-success-active: var(--dsi-color-background-success-active); + --dsi-icon-success-hover: var(--dsi-color-background-success-hover); + --dsi-icon-success: var(--dsi-color-background-success); + --dsi-icon-secondary-active: var(--dsi-color-background-secondary-active); + --dsi-icon-secondary-hover: var(--dsi-color-background-secondary-hover); + --dsi-icon-secondary: var(--dsi-color-background-secondary); + --dsi-icon-primary-active: var(--dsi-color-background-primary-active); + --dsi-icon-primary-hover: var(--dsi-color-background-primary-hover); + --dsi-icon-primary: var(--dsi-color-background-primary); + --dsi-icon-default: var(--dsi-color-text-base); +} + +:root { + @each $color, $value in $colors { --#{$prefix}#{$color}: #{$value}; } @@ -144,11 +445,16 @@ --#{$prefix}caption-line-height: var(--dsi-caption-line-height); --#{$prefix}caption-font-weight-regular: var(--dsi-caption-font-weight-regular); --#{$prefix}caption-font-weight-semibold: var(--dsi-caption-font-weight-semibold); - --#{$prefix}icon-size-xl: var(--dsi-icon-size-xxl); - --#{$prefix}icon-size-l: var(--dsi-icon-size-xl); - --#{$prefix}icon-size-m: var(--dsi-icon-size-l); - --#{$prefix}icon-size-s: var(--dsi-icon-size-m); - --#{$prefix}icon-size-xs: var(--dsi-icon-size-s); + --#{$prefix}label-font-size: var(--dsi-label-font-size); + --#{$prefix}label-font-size-s: var(--dsi-label-font-size-s); + --#{$prefix}label-font-size-xs: var(--dsi-label-font-size-xs); + --#{$prefix}label-font-size-m: var(--dsi-label-font-size-m); + --#{$prefix}label-line-height: var(--dsi-font-line-height-tight); + --#{$prefix}icon-size-xl: var(--dsi-icon-size-xl); + --#{$prefix}icon-size-l: var(--dsi-icon-size-l); + --#{$prefix}icon-size-m: var(--dsi-icon-size-m); + --#{$prefix}icon-size-s: var(--dsi-icon-size-s); + --#{$prefix}icon-size-xs: var(--dsi-icon-size-xs); --#{$prefix}border-broad: var(--dsi-border-broad); --#{$prefix}border-thick: var(--dsi-border-thick); --#{$prefix}border-double: var(--dsi-border-double); @@ -285,5 +591,6 @@ --#{$prefix}icon-primary-hover: var(--dsi-icon-primary-hover); --#{$prefix}icon-primary: var(--dsi-icon-primary); --#{$prefix}icon-default: var(--dsi-icon-default); + --#{$prefix}icon-disabled: var(--dsi-icon-disabled); --#{$prefix}icon-spacing: var(--dsi-spacing-inline-xs); } diff --git a/src/scss/bootstrap-italia.scss b/src/scss/bootstrap-italia.scss index 0e63c2570..554debd44 100644 --- a/src/scss/bootstrap-italia.scss +++ b/src/scss/bootstrap-italia.scss @@ -1,4 +1,4 @@ -@use '~design-tokens-italia/css/dsi-tokens.css'; +// @use '~design-tokens-italia/css/dsi-tokens.css'; @import 'base/mixins/banner'; @include bsBanner(''); From 3576aba19ae2ff3d9aca6d2f49b0e598881241a6 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 21 Jan 2025 17:07:19 +0100 Subject: [PATCH 47/59] chore: update dependencies --- package-lock.json | 8 ++++---- package.json | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index b6ffb4f39..c3ff247a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@types/bootstrap": "^5.2.6", "accessible-autocomplete": "^3.0.1", "animejs": "^3.2.1", - "design-tokens-italia": "^1.1.1", + "design-tokens-italia": "^1.3.0-alpha.5", "just-validate": "^4.3.0", "minimasonry": "^1.3.2", "progressbar.js": "^1.1.0", @@ -4993,9 +4993,9 @@ "license": "ISC" }, "node_modules/design-tokens-italia": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/design-tokens-italia/-/design-tokens-italia-1.1.1.tgz", - "integrity": "sha512-WCDGP1ASq8s0MlwoJLhBGBl/kX/4PFU93xEBXsFELyYgdaDQMg9qZJH379f1HktMNWnLmKCBqd8qZju/o+0wVA==", + "version": "1.3.0-alpha.5", + "resolved": "https://registry.npmjs.org/design-tokens-italia/-/design-tokens-italia-1.3.0-alpha.5.tgz", + "integrity": "sha512-YQzd1KUfB8O1JXXcq7F4SJmHpoiPFtbnm8tgbG6HO16FFeUad5Ng7x3tkZufOwNsjnusNEunHcYPBpQ6Bz1Q2A==", "license": "BSD-3-Clause" }, "node_modules/destroy": { diff --git a/package.json b/package.json index f2450c43a..0b4d97da1 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "@octokit/rest": "^18.12.0", "@rollup/plugin-babel": "^6.0.4", "@rollup/plugin-legacy": "^3.0.2", - "@rollup/plugin-node-resolve": "^15.3.0", + "@rollup/plugin-node-resolve": "^15.3.1", "@rollup/plugin-terser": "^0.4.4", "browser-sync": "^3.0.2", "browserslist-config-design-italia": "^1.1.0", @@ -99,7 +99,7 @@ "@types/bootstrap": "^5.2.6", "accessible-autocomplete": "^3.0.1", "animejs": "^3.2.1", - "design-tokens-italia": "^1.1.1", + "design-tokens-italia": "^1.3.0-alpha.5", "just-validate": "^4.3.0", "minimasonry": "^1.3.2", "progressbar.js": "^1.1.0", From 35c23ef4a159557d211bd01f99cc38e4b3f04865 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 21 Jan 2025 17:09:51 +0100 Subject: [PATCH 48/59] refactor: update list --- src/scss/components/_list.scss | 50 ++++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/src/scss/components/_list.scss b/src/scss/components/_list.scss index ea81f978f..a6c46ea99 100644 --- a/src/scss/components/_list.scss +++ b/src/scss/components/_list.scss @@ -5,13 +5,17 @@ margin: 0; padding: 0; + a.list-item span { + text-decoration: underline; + } + .list-item { - transition: all 0.3s; + // transition: all 0.3s; margin-top: -1px; display: flex; align-items: center; text-decoration: none; - border-bottom: 1px solid $list-border-color; + // border-bottom: 1px solid $list-border-color; overflow-wrap: anywhere; .avatar, @@ -25,7 +29,7 @@ width: $v-gap * 5; svg { - fill: $primary-a5; + fill: var(--#{$prefix}icon-primary); } } @@ -112,17 +116,21 @@ } } - li:last-child { - .list-item { - span.text { - border-bottom: 1px solid transparent; - } - } + li:not(:last-child) .list-item { + border-bottom: 1px solid var(--#{$prefix}color-border-subtle); } - a .text { - text-decoration: underline; - } + // li:last-child { + // .list-item { + // span.text { + // border-bottom: 1px solid transparent; + // } + // } + // } + + // a .text { + // text-decoration: underline; + // } } } @@ -162,7 +170,7 @@ &:hover { svg { - fill: $primary-a10; + fill: var(--#{$prefix}icon-primary-hover); } } } @@ -179,14 +187,14 @@ } a.list-item:hover { - box-shadow: $card-shadow; - color: $color-text-primary-hover; - text-decoration: none; - background: $white; - position: relative; - z-index: 1; - transition: none; - border-bottom: 1px solid transparent; + color: var(--#{$prefix}color-text-primary-hover); + // box-shadow: $card-shadow; + // text-decoration: none; + // background: $white; + // position: relative; + // z-index: 1; + // transition: none; + // border-bottom: 1px solid transparent; } } } From cdc421a662c88e7f7a2e6721a2ade5da87d17436 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 21 Jan 2025 17:33:07 +0100 Subject: [PATCH 49/59] fix: variables --- src/scss/components/_linklist.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/scss/components/_linklist.scss b/src/scss/components/_linklist.scss index 5c36eb4dc..3297180ac 100644 --- a/src/scss/components/_linklist.scss +++ b/src/scss/components/_linklist.scss @@ -230,12 +230,12 @@ } &:before { - right: $link-list-checkbox-icon-right; + right: var(--#{$prefix}spacing-inset-m); } } [type='checkbox'][disabled]+label { - color: $color-text-secondary; + color: var(--#{$prefix}color-text-disabled); } } } @@ -257,6 +257,10 @@ font-size: var(--#{$prefix}label-font-size-m); } } + + p { + margin-bottom: 0; + } } @include media-breakpoint-up(md) { From 4c3cd59631455c7188fb9c230173527a8679b9f7 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 21 Jan 2025 17:44:11 +0100 Subject: [PATCH 50/59] fix: remove avatar size-lg --- docs/organizzare-i-contenuti/liste.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/organizzare-i-contenuti/liste.md b/docs/organizzare-i-contenuti/liste.md index cedbe09c9..a24971211 100644 --- a/docs/organizzare-i-contenuti/liste.md +++ b/docs/organizzare-i-contenuti/liste.md @@ -59,7 +59,7 @@ L'elemento `.avatar` precede l'elemento `.it-right-zone` che contiene il testo.