@alfalab/core-components-vars 9.0.0 → 9.1.0

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 (14) hide show
  1. package/colors-bluetint.css +4 -0
  2. package/colors-indigo.css +4 -0
  3. package/cssm/bundle/click.css +4 -0
  4. package/cssm/bundle/corp.css +4 -0
  5. package/cssm/bundle/intranet.css +4 -0
  6. package/cssm/bundle/mobile.css +4 -0
  7. package/cssm/bundle/site.css +4 -0
  8. package/cssm/colors-bluetint.css +4 -0
  9. package/cssm/colors-indigo.css +4 -0
  10. package/cssm/index.css +4 -0
  11. package/index.d.ts +4 -0
  12. package/index.js +4 -0
  13. package/mixins.css +68 -0
  14. package/package.json +1 -1
package/colors-bluetint.css CHANGED
@@ -489,5 +489,9 @@
489
489
  --color-light-text-secondary-inverted-tint-30: rgba(241, 241, 248, 0.678);
490
490
  --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
491
491
  --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
492
+ --color-static-bg-primary-dark-tint-15: rgb(54, 54, 54);
493
+ --color-static-bg-primary-dark-tint-20: rgb(65, 65, 65);
494
+ --color-static-graphic-light-shade-7: rgb(237, 237, 237);
495
+ --color-static-graphic-light-shade-15: rgb(217, 217, 217);
492
496
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
493
497
  }
package/colors-indigo.css CHANGED
@@ -489,5 +489,9 @@
489
489
  --color-light-text-secondary-inverted-tint-30: rgba(255, 255, 255, 0.79);
490
490
  --color-static-bg-primary-dark-alpha-10: rgba(11, 31, 53, 0.1);
491
491
  --color-static-bg-primary-dark-alpha-20: rgba(11, 31, 53, 0.2);
492
+ --color-static-bg-primary-dark-tint-15: rgb(48, 65, 83);
493
+ --color-static-bg-primary-dark-tint-20: rgb(60, 76, 93);
494
+ --color-static-graphic-light-shade-7: rgb(237, 237, 237);
495
+ --color-static-graphic-light-shade-15: rgb(217, 217, 217);
492
496
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
493
497
  }
package/cssm/bundle/click.css CHANGED
@@ -489,6 +489,10 @@
489
489
  --color-light-text-secondary-inverted-tint-30: rgba(241, 241, 248, 0.678);
490
490
  --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
491
491
  --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
492
+ --color-static-bg-primary-dark-tint-15: rgb(54, 54, 54);
493
+ --color-static-bg-primary-dark-tint-20: rgb(65, 65, 65);
494
+ --color-static-graphic-light-shade-7: rgb(237, 237, 237);
495
+ --color-static-graphic-light-shade-15: rgb(217, 217, 217);
492
496
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
493
497
  }
494
498
  :root {
package/cssm/bundle/corp.css CHANGED
@@ -489,6 +489,10 @@
489
489
  --color-light-text-secondary-inverted-tint-30: rgba(255, 255, 255, 0.79);
490
490
  --color-static-bg-primary-dark-alpha-10: rgba(11, 31, 53, 0.1);
491
491
  --color-static-bg-primary-dark-alpha-20: rgba(11, 31, 53, 0.2);
492
+ --color-static-bg-primary-dark-tint-15: rgb(48, 65, 83);
493
+ --color-static-bg-primary-dark-tint-20: rgb(60, 76, 93);
494
+ --color-static-graphic-light-shade-7: rgb(237, 237, 237);
495
+ --color-static-graphic-light-shade-15: rgb(217, 217, 217);
492
496
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
493
497
  }
494
498
  :root {
package/cssm/bundle/intranet.css CHANGED
@@ -489,6 +489,10 @@
489
489
  --color-light-text-secondary-inverted-tint-30: rgba(241, 241, 248, 0.678);
490
490
  --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
491
491
  --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
492
+ --color-static-bg-primary-dark-tint-15: rgb(54, 54, 54);
493
+ --color-static-bg-primary-dark-tint-20: rgb(65, 65, 65);
494
+ --color-static-graphic-light-shade-7: rgb(237, 237, 237);
495
+ --color-static-graphic-light-shade-15: rgb(217, 217, 217);
492
496
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
493
497
  }
494
498
  :root {
package/cssm/bundle/mobile.css CHANGED
@@ -489,6 +489,10 @@
489
489
  --color-light-text-secondary-inverted-tint-30: rgba(241, 241, 248, 0.678);
490
490
  --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
491
491
  --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
492
+ --color-static-bg-primary-dark-tint-15: rgb(54, 54, 54);
493
+ --color-static-bg-primary-dark-tint-20: rgb(65, 65, 65);
494
+ --color-static-graphic-light-shade-7: rgb(237, 237, 237);
495
+ --color-static-graphic-light-shade-15: rgb(217, 217, 217);
492
496
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
493
497
  }
494
498
  :root {
package/cssm/bundle/site.css CHANGED
@@ -489,6 +489,10 @@
489
489
  --color-light-text-secondary-inverted-tint-30: rgba(241, 241, 248, 0.678);
490
490
  --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
491
491
  --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
492
+ --color-static-bg-primary-dark-tint-15: rgb(54, 54, 54);
493
+ --color-static-bg-primary-dark-tint-20: rgb(65, 65, 65);
494
+ --color-static-graphic-light-shade-7: rgb(237, 237, 237);
495
+ --color-static-graphic-light-shade-15: rgb(217, 217, 217);
492
496
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
493
497
  }
494
498
  :root {
package/cssm/colors-bluetint.css CHANGED
@@ -489,5 +489,9 @@
489
489
  --color-light-text-secondary-inverted-tint-30: rgba(241, 241, 248, 0.678);
490
490
  --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
491
491
  --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
492
+ --color-static-bg-primary-dark-tint-15: rgb(54, 54, 54);
493
+ --color-static-bg-primary-dark-tint-20: rgb(65, 65, 65);
494
+ --color-static-graphic-light-shade-7: rgb(237, 237, 237);
495
+ --color-static-graphic-light-shade-15: rgb(217, 217, 217);
492
496
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
493
497
  }
package/cssm/colors-indigo.css CHANGED
@@ -489,5 +489,9 @@
489
489
  --color-light-text-secondary-inverted-tint-30: rgba(255, 255, 255, 0.79);
490
490
  --color-static-bg-primary-dark-alpha-10: rgba(11, 31, 53, 0.1);
491
491
  --color-static-bg-primary-dark-alpha-20: rgba(11, 31, 53, 0.2);
492
+ --color-static-bg-primary-dark-tint-15: rgb(48, 65, 83);
493
+ --color-static-bg-primary-dark-tint-20: rgb(60, 76, 93);
494
+ --color-static-graphic-light-shade-7: rgb(237, 237, 237);
495
+ --color-static-graphic-light-shade-15: rgb(217, 217, 217);
492
496
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
493
497
  }
package/cssm/index.css CHANGED
@@ -559,6 +559,10 @@
559
559
  --color-light-text-secondary-inverted-tint-30: rgba(241, 241, 248, 0.678);
560
560
  --color-static-bg-primary-dark-alpha-10: rgba(18, 18, 18, 0.1);
561
561
  --color-static-bg-primary-dark-alpha-20: rgba(18, 18, 18, 0.2);
562
+ --color-static-bg-primary-dark-tint-15: rgb(54, 54, 54);
563
+ --color-static-bg-primary-dark-tint-20: rgb(65, 65, 65);
564
+ --color-static-graphic-light-shade-7: rgb(237, 237, 237);
565
+ --color-static-graphic-light-shade-15: rgb(217, 217, 217);
562
566
  --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
563
567
  } :root {
564
568
  --color-static-corpbg-neutral: #bdc0c2;
package/index.d.ts CHANGED
@@ -557,6 +557,10 @@ export const colorLightTextSecondaryInvertedTint20: "rgba(239, 239, 247, 0.632)"
557
557
  export const colorLightTextSecondaryInvertedTint30: "rgba(241, 241, 248, 0.678)";
558
558
  export const colorStaticBgPrimaryDarkAlpha10: "rgba(18, 18, 18, 0.1)";
559
559
  export const colorStaticBgPrimaryDarkAlpha20: "rgba(18, 18, 18, 0.2)";
560
+ export const colorStaticBgPrimaryDarkTint15: "rgb(54, 54, 54)";
561
+ export const colorStaticBgPrimaryDarkTint20: "rgb(65, 65, 65)";
562
+ export const colorStaticGraphicLightShade7: "rgb(237, 237, 237)";
563
+ export const colorStaticGraphicLightShade15: "rgb(217, 217, 217)";
560
564
  export const colorStaticTextPrimaryLightAlpha30: "rgba(255, 255, 255, 0.3)";
561
565
  export const colorStaticCorpbgNeutral: "#bdc0c2";
562
566
  export const colorStaticCorpbgPrimary: "#212a33";
package/index.js CHANGED
@@ -557,6 +557,10 @@ export const colorLightTextSecondaryInvertedTint20 = "rgba(239, 239, 247, 0.632)
557
557
  export const colorLightTextSecondaryInvertedTint30 = "rgba(241, 241, 248, 0.678)";
558
558
  export const colorStaticBgPrimaryDarkAlpha10 = "rgba(18, 18, 18, 0.1)";
559
559
  export const colorStaticBgPrimaryDarkAlpha20 = "rgba(18, 18, 18, 0.2)";
560
+ export const colorStaticBgPrimaryDarkTint15 = "rgb(54, 54, 54)";
561
+ export const colorStaticBgPrimaryDarkTint20 = "rgb(65, 65, 65)";
562
+ export const colorStaticGraphicLightShade7 = "rgb(237, 237, 237)";
563
+ export const colorStaticGraphicLightShade15 = "rgb(217, 217, 217)";
560
564
  export const colorStaticTextPrimaryLightAlpha30 = "rgba(255, 255, 255, 0.3)";
561
565
  export const colorStaticCorpbgNeutral = "#bdc0c2";
562
566
  export const colorStaticCorpbgPrimary = "#212a33";
package/mixins.css CHANGED
@@ -2,3 +2,71 @@
2
2
  outline: 2px solid var(--focus-color);
3
3
  outline-offset: 2px;
4
4
  }
5
+
6
+ @define-mixin custom-scrollbar {
7
+ overflow: auto;
8
+ overflow: overlay;
9
+ cursor: auto;
10
+
11
+ &::-webkit-scrollbar {
12
+ width: 12px;
13
+ }
14
+
15
+ &::-webkit-scrollbar-track {
16
+ background-color: transparent;
17
+ }
18
+
19
+ &::-webkit-scrollbar-track-piece {
20
+ background-color: transparent;
21
+ }
22
+
23
+ &::-webkit-scrollbar-thumb {
24
+ background-color: var(--color-light-graphic-primary-alpha-30);
25
+ border-radius: var(--border-radius-circle) / 6px;
26
+ border-color: transparent;
27
+ border-style: solid;
28
+ border-width: 4px;
29
+ background-clip: padding-box;
30
+ min-height: 40px;
31
+ }
32
+
33
+ &::-webkit-scrollbar-thumb:hover {
34
+ border-radius: var(--border-radius-circle) / 7px;
35
+ border-width: 4px 3px;
36
+ }
37
+
38
+ &::-webkit-scrollbar-thumb:active {
39
+ background-color: var(--color-light-graphic-primary-alpha-60);
40
+ }
41
+
42
+ &::-webkit-resizer {
43
+ background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
44
+ no-repeat right bottom;
45
+ }
46
+
47
+ &::-webkit-scrollbar-button,
48
+ &::-webkit-scrollbar-corner {
49
+ display: none;
50
+ }
51
+ }
52
+
53
+ @define-mixin bg-class-list {
54
+ @each $backgroundColorBg in accent, info, attention-muted, positive-muted, negative-muted,
55
+ primary, primary-inverted, secondary, secondary-inverted, tertiary, tertiary-inverted,
56
+ quaternary, quaternary-inverted
57
+ {
58
+ .background-$(backgroundColorBg) {
59
+ background-color: var(--color-light-bg-$(backgroundColorBg));
60
+ }
61
+ }
62
+
63
+ @each $backgroundColor in specialbg-component, specialbg-component-inverted,
64
+ specialbg-primary-grouped, specialbg-secondary-grouped, specialbg-tertiary-grouped,
65
+ specialbg-secondary-transparent, specialbg-secondary-transparent-inverted,
66
+ specialbg-tertiary-transparent, specialbg-tertiary-transparent-inverted
67
+ {
68
+ .background-$(backgroundColor) {
69
+ background-color: var(--color-light-$(backgroundColor));
70
+ }
71
+ }
72
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-vars",
3
- "version": "9.0.0",
3
+ "version": "9.1.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",