igniteui-theming 8.0.0-beta.1 → 8.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/json/elevations/indigo.json +1 -1
  2. package/package.json +1 -1
  3. package/sass/elevations/presets/_indigo.scss +9 -9
  4. package/sass/themes/schemas/components/dark/_snackbar.scss +3 -0
  5. package/sass/themes/schemas/components/dark/_tree.scss +2 -1
  6. package/sass/themes/schemas/components/elevation/_snackbar.scss +8 -2
  7. package/sass/themes/schemas/components/light/_button-group.scss +3 -0
  8. package/sass/themes/schemas/components/light/_button.scss +2 -2
  9. package/sass/themes/schemas/components/light/_icon-button.scss +2 -2
  10. package/sass/themes/schemas/components/light/_tree.scss +2 -2
package/json/elevations/indigo.json CHANGED
@@ -1 +1 @@
1
- {"elevations":{"0":"none","1":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08)","2":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.08)","3":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.08)","4":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(36, 37, 44, 0.1)","5":"0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 rgba(0, 0, 0, 0.08)","6":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(36, 37, 44, 0.2)","7":"0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.08)","8":"0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.08)","9":"0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.08)","10":"0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.08)","11":"0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.08)","12":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","13":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","14":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","15":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","16":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","17":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","18":"0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08)","19":"0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08)","20":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","21":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","22":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","23":"0 0 calc(var(--ig-elevation-factor, 1) * 16px) 0 rgba(0, 0, 0, 0.3)","24":"0 0 calc(var(--ig-elevation-factor, 1) * 16px) 0 rgba(36, 37, 44, 0.4)"}}
1
+ {"elevations":{"0":"none","1":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08)","2":"0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 6px) 0 rgba(0, 0, 0, 0.3)","3":"0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 6px) 0 rgba(36, 37, 44, 0.2)","4":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(36, 37, 44, 0.1)","5":"0 0 calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(36, 37, 44, 0.2)","6":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(36, 37, 44, 0.2)","7":"0 0 calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(0, 0, 0, 0.3)","8":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 rgba(36, 37, 44, 0.2)","9":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 rgba(0, 0, 0, 0.3)","10":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 6px) 0 rgba(36, 37, 44, 0.4)","11":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 6px) 0 rgba(0, 0, 0, 0.4)","12":"0 0 calc(var(--ig-elevation-factor, 1) * 16px) 0 rgba(36, 37, 44, 0.4)","13":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","14":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","15":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","16":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","17":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","18":"0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08)","19":"0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08)","20":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","21":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","22":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","23":"0 0 calc(var(--ig-elevation-factor, 1) * 16px) 0 rgba(0, 0, 0, 0.3)","24":"0 0 calc(var(--ig-elevation-factor, 1) * 16px) 0 rgba(36, 37, 44, 0.4)"}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "8.0.0-beta.1",
3
+ "version": "8.0.0-beta.2",
4
4
  "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/sass/elevations/presets/_indigo.scss CHANGED
@@ -24,17 +24,17 @@ $color-3: rgba(0 0 0 / 8%) !default;
24
24
  /// All elevation levels
25
25
  /// @access private
26
26
  $_1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3));
27
- $_2: box-shadow((0 1px 5px 0 $color-1, 0 2px 2px 0 $color-2, 0 3px 1px -2px $color-3));
28
- $_3: box-shadow((0 1px 8px 0 $color-1, 0 3px 4px 0 $color-2, 0 3px 3px -2px $color-3));
27
+ $_2: box-shadow((0 3px 6px 0 rgba(0 0 0 / 30%)));
28
+ $_3: box-shadow((0 3px 6px 0 rgba(36 37 44 / 20%)));
29
29
  $_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 10%)));
30
- $_5: box-shadow((0 3px 5px -1px $color-1, 0 5px 8px 0 $color-2, 0 1px 14px 0 $color-3));
30
+ $_5: box-shadow((0 0 12px 0 rgba(36 37 44 / 20%)));
31
31
  $_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 20%)));
32
- $_7: box-shadow((0 4px 5px -2px $color-1, 0 7px 10px 1px $color-2, 0 2px 16px 1px $color-3));
33
- $_8: box-shadow((0 5px 5px -3px $color-1, 0 8px 10px 1px $color-2, 0 3px 14px 2px $color-3));
34
- $_9: box-shadow((0 5px 6px -3px $color-1, 0 9px 12px 1px $color-2, 0 3px 16px 2px $color-3));
35
- $_10: box-shadow((0 6px 6px -3px $color-1, 0 10px 14px 1px $color-2, 0 4px 18px 3px $color-3));
36
- $_11: box-shadow((0 6px 7px -4px $color-1, 0 11px 15px 1px $color-2, 0 4px 20px 3px $color-3));
37
- $_12: box-shadow((0 7px 8px -4px $color-1, 0 12px 17px 2px $color-2, 0 5px 22px 4px $color-3));
32
+ $_7: box-shadow((0 0 12px 0 rgba(0 0 0 / 30%)));
33
+ $_8: box-shadow((0 2px 2px 0 rgba(36 37 44 / 20%)));
34
+ $_9: box-shadow((0 2px 2px 0 rgba(0 0 0 / 30%)));
35
+ $_10: box-shadow((0 2px 6px 0 rgba(36 37 44 / 40%)));
36
+ $_11: box-shadow((0 2px 6px 0 rgba(0 0 0 / 40%)));
37
+ $_12: box-shadow((0 0 16px 0 rgba(36 37 44 / 40%)));
38
38
  $_13: box-shadow((0 7px 8px -4px $color-1, 0 13px 19px 2px $color-2, 0 5px 24px 4px $color-3));
39
39
  $_14: box-shadow((0 7px 9px -4px $color-1, 0 14px 21px 2px $color-2, 0 5px 26px 4px $color-3));
40
40
  $_15: box-shadow((0 8px 9px -5px $color-1, 0 15px 22px 2px $color-2, 0 6px 28px 5px $color-3));
package/sass/themes/schemas/components/dark/_snackbar.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use '../../../../utils/map' as *;
2
2
  @use '../light/snackbar' as *;
3
+ @use '../elevation/snackbar' as *;
3
4
 
4
5
  ////
5
6
  /// @package theming
@@ -28,8 +29,10 @@ $dark-bootstrap-snackbar: $bootstrap-snackbar;
28
29
  /// @prop {Map} text-color [contrast-color: ('gray', 200)] - The text color used in the snackbar.
29
30
  /// @prop {Map} button-color [contrast-color: ('gray', 200)] - The button color used in the snackbar.
30
31
  /// @requires $indigo-snackbar
32
+ /// @requires {Map} $dark-indigo-elevation-snackbar
31
33
  $dark-indigo-snackbar: extend(
32
34
  $indigo-snackbar,
35
+ $dark-indigo-elevation-snackbar,
33
36
  (
34
37
  background: (
35
38
  color: (
package/sass/themes/schemas/components/dark/_tree.scss CHANGED
@@ -115,7 +115,7 @@ $dark-bootstrap-tree: extend(
115
115
  /// @prop {Map} background-active-selected [color: ('primary', 400, 0.3)] - The background color used for the active selected tree node.
116
116
  /// @prop {Map} foreground [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node content.
117
117
  /// @prop {Map} foreground-active [contrast-color: ('gray', 50)] - The color used for the content in active state of the tree node.
118
- /// @prop {Map} foreground-selected [contrast-color: ('gray', 50)] - The color used for the content of the selected tree node.
118
+ /// @prop {Map} foreground-selected [contrast-color: ('gray', 50, 0.8)] - The color used for the content of the selected tree node.
119
119
  /// @prop {Map} foreground-active-selected [contrast-color: ('gray', 50)] - The color used for the content of the active selected tree node.
120
120
  /// @prop {Map} foreground-disabled [contrast-color: ('gray', 50, 0.2)] - The color used for the content of the disabled tree node.
121
121
  /// @prop {Map} icon-color [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node icon.
@@ -137,6 +137,7 @@ $dark-indigo-tree: extend(
137
137
  contrast-color: (
138
138
  'gray',
139
139
  50,
140
+ 0.8,
140
141
  ),
141
142
  ),
142
143
  background-active: (
package/sass/themes/schemas/components/elevation/_snackbar.scss CHANGED
@@ -17,7 +17,13 @@ $bootstrap-elevation-snackbar: (
17
17
  );
18
18
 
19
19
  /// @type Map
20
- /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used in the indigo snackbar.
20
+ /// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the indigo snackbar.
21
21
  $indigo-elevation-snackbar: (
22
- elevation: 0,
22
+ elevation: 10,
23
+ );
24
+
25
+ /// @type Map
26
+ /// @prop {Number} elevation [11] - The elevation level, between 0-24, to be used in the dark indigo snackbar.
27
+ $dark-indigo-elevation-snackbar: (
28
+ elevation: 11,
23
29
  );
package/sass/themes/schemas/components/light/_button-group.scss CHANGED
@@ -132,6 +132,7 @@ $light-button-group: extend(
132
132
  /// @prop {Map} disabled-selected-icon-color [color: ('gray', 400)] - The disabled icon color for a selected item in the button group.
133
133
  /// @prop {Map} disabled-selected-border-color [color: ('gray', 400)] - The disabled border color for a selected item from the button group.
134
134
  /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
135
+ /// @prop {Number} default-size [3] - The default size used for the button-group component.
135
136
  /// @requires {Map} $light-button-group
136
137
  /// @requires {Map} $default-elevation-button-group
137
138
  $material-button-group: extend(
@@ -297,6 +298,8 @@ $material-button-group: extend(
297
298
  400,
298
299
  ),
299
300
  ),
301
+
302
+ default-size: 3,
300
303
  )
301
304
  );
302
305
 
package/sass/themes/schemas/components/light/_button.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  /// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
23
23
  /// @prop {Map} disabled-icon-color [color: ('gray', 500)] - The disabled icon color of the button.
24
24
  /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the button.
25
- /// @prop {Number} default-size [1] - The default size used for the button component.
25
+ /// @prop {Number} default-size [3] - The default size used for the button component.
26
26
  $light-base-button: (
27
27
  shadow-color: transparent,
28
28
  border-color: transparent,
@@ -56,7 +56,7 @@ $light-base-button: (
56
56
  rem(36px),
57
57
  ),
58
58
  ),
59
- default-size: 1,
59
+ default-size: 3,
60
60
  );
61
61
 
62
62
  /// @type {Map}
package/sass/themes/schemas/components/light/_icon-button.scss CHANGED
@@ -29,7 +29,7 @@
29
29
  /// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color of the material icon button.
30
30
  /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the material icon button.
31
31
  /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the material icon button.
32
- /// @prop {Number} default-size [2] - The default size used for the icon button.
32
+ /// @prop {Number} default-size [3] - The default size used for the icon button.
33
33
  $material-base-icon-button: (
34
34
  shadow-color: transparent,
35
35
  background: transparent,
@@ -121,7 +121,7 @@ $material-base-icon-button: (
121
121
  rem(36px),
122
122
  ),
123
123
  ),
124
- default-size: 2,
124
+ default-size: 3,
125
125
  );
126
126
 
127
127
  /// Generates a material flat icon button schema.
package/sass/themes/schemas/components/light/_tree.scss CHANGED
@@ -236,7 +236,7 @@ $bootstrap-tree: extend(
236
236
  /// @prop {Color} background-disabled [transparent] - The background color used for the tree node in disabled state.
237
237
  /// @prop {Map} foreground [color: ('gray', 800)] - The color used for the tree node content.
238
238
  /// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
239
- /// @prop {Map} foreground-selected [color: ('gray', 900)] - The color used for the content of the selected tree node.
239
+ /// @prop {Map} foreground-selected [color: ('gray', 800)] - The color used for the content of the selected tree node.
240
240
  /// @prop {Map} foreground-active-selected [color: ('gray', 900)] - The color used for the content of the active selected tree node.
241
241
  /// @prop {Map} foreground-disabled [color: ('gray', 900, 0.2)] - The color used for the content of the disabled tree node.
242
242
  /// @prop {Map} icon-color [color: ('gray', 600)] - The color used for the tree node icon.
@@ -259,7 +259,7 @@ $indigo-tree: extend(
259
259
  foreground-selected: (
260
260
  color: (
261
261
  'gray',
262
- 900,
262
+ 800,
263
263
  ),
264
264
  ),
265
265
  background-active: (