@rescui/icons 1.8.3 → 1.8.4

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 (5) hide show
  1. package/lib/index.css +26 -21
  2. package/lib/index.css.js +12 -12
  3. package/lib/index.css.js.map +1 -1
  4. package/lib/index.css.map +1 -1
  5. package/package.json +5 -5
package/lib/index.css CHANGED
@@ -1,4 +1,9 @@
1
- ._icon_3sp1p2_4{
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
6
+ ._icon_1npbgia_4{
2
7
  --_rs-theme-dark:var(
3
8
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
9
  var(--rs-theme-dark, 0)
@@ -8,7 +13,7 @@
8
13
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
14
  }
10
15
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_3sp1p2_4{
16
+ ._icon_1npbgia_4{
12
17
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
13
18
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
14
19
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -17,7 +22,7 @@
17
22
  }
18
23
  }
19
24
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_3sp1p2_4{
25
+ ._icon_1npbgia_4{
21
26
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
22
27
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
23
28
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -25,30 +30,30 @@
25
30
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
26
31
  }
27
32
  }
28
- ._icon_3sp1p2_4{
33
+ ._icon_1npbgia_4{
29
34
 
30
35
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
36
 
32
37
  width:var(--rs-icons-width, auto);
33
38
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
39
  }
35
- ._sizeXS_3sp1p2_14{
40
+ ._sizeXS_1npbgia_14{
36
41
  --_rs-icons-height:16px;
37
42
  }
38
- ._sizeS_3sp1p2_18{
43
+ ._sizeS_1npbgia_18{
39
44
  --_rs-icons-height:20px;
40
45
  }
41
- ._sizeM_3sp1p2_22{
46
+ ._sizeM_1npbgia_22{
42
47
  --_rs-icons-height:24px;
43
48
  }
44
- ._sizeL_3sp1p2_26{
49
+ ._sizeL_1npbgia_26{
45
50
  --_rs-icons-height:28px;
46
51
  }
47
- ._light_3sp1p2_30{
52
+ ._light_1npbgia_30{
48
53
  --rs-theme-dark:0;
49
54
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
50
55
  }
51
- ._dark_3sp1p2_34{
56
+ ._dark_1npbgia_34{
52
57
  --rs-theme-dark:1;
53
58
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
54
59
  }
@@ -60,39 +65,39 @@
60
65
  transform:rotate(360deg);
61
66
  }
62
67
  }
63
- ._allVariants_3sp1p2_48{
68
+ ._allVariants_1npbgia_48{
64
69
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
70
  container:rs-icon / size;
66
71
  }
67
- ._variant16_3sp1p2_53,
68
- ._variant20_3sp1p2_54,
69
- ._variant24_3sp1p2_55{
72
+ ._variant16_1npbgia_53,
73
+ ._variant20_1npbgia_54,
74
+ ._variant24_1npbgia_55{
70
75
  display:none;
71
76
  }
72
- ._variant28_3sp1p2_58{
77
+ ._variant28_1npbgia_58{
73
78
  display:block;
74
79
  }
75
80
  @container rs-icon (max-height: 24px){
76
- ._variant24_3sp1p2_55{
81
+ ._variant24_1npbgia_55{
77
82
  display:block;
78
83
  }
79
- ._variant28_3sp1p2_58{
84
+ ._variant28_1npbgia_58{
80
85
  display:none;
81
86
  }
82
87
  }
83
88
  @container rs-icon (max-height: 20px){
84
- ._variant20_3sp1p2_54{
89
+ ._variant20_1npbgia_54{
85
90
  display:block;
86
91
  }
87
- ._variant24_3sp1p2_55{
92
+ ._variant24_1npbgia_55{
88
93
  display:none;
89
94
  }
90
95
  }
91
96
  @container rs-icon (max-height: 16px){
92
- ._variant16_3sp1p2_53{
97
+ ._variant16_1npbgia_53{
93
98
  display:block;
94
99
  }
95
- ._variant20_3sp1p2_54{
100
+ ._variant20_1npbgia_54{
96
101
  display:none;
97
102
  }
98
103
  }
package/lib/index.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  export default {
2
- "icon": "_icon_3sp1p2_4",
3
- "sizeXS": "_sizeXS_3sp1p2_14",
4
- "sizeS": "_sizeS_3sp1p2_18",
5
- "sizeM": "_sizeM_3sp1p2_22",
6
- "sizeL": "_sizeL_3sp1p2_26",
7
- "light": "_light_3sp1p2_30",
8
- "dark": "_dark_3sp1p2_34",
9
- "allVariants": "_allVariants_3sp1p2_48",
10
- "variant16": "_variant16_3sp1p2_53",
11
- "variant20": "_variant20_3sp1p2_54",
12
- "variant24": "_variant24_3sp1p2_55",
13
- "variant28": "_variant28_3sp1p2_58"
2
+ "icon": "_icon_1npbgia_4",
3
+ "sizeXS": "_sizeXS_1npbgia_14",
4
+ "sizeS": "_sizeS_1npbgia_18",
5
+ "sizeM": "_sizeM_1npbgia_22",
6
+ "sizeL": "_sizeL_1npbgia_26",
7
+ "light": "_light_1npbgia_30",
8
+ "dark": "_dark_1npbgia_34",
9
+ "allVariants": "_allVariants_1npbgia_48",
10
+ "variant16": "_variant16_1npbgia_53",
11
+ "variant20": "_variant20_1npbgia_54",
12
+ "variant24": "_variant24_1npbgia_55",
13
+ "variant28": "_variant28_1npbgia_58"
14
14
  };
15
15
  //# sourceMappingURL=index.css.js.map
package/lib/index.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.css.js","names":[],"sources":["index.css.js"],"sourcesContent":["export default {\"icon\":\"_icon_3sp1p2_4\",\"sizeXS\":\"_sizeXS_3sp1p2_14\",\"sizeS\":\"_sizeS_3sp1p2_18\",\"sizeM\":\"_sizeM_3sp1p2_22\",\"sizeL\":\"_sizeL_3sp1p2_26\",\"light\":\"_light_3sp1p2_30\",\"dark\":\"_dark_3sp1p2_34\",\"allVariants\":\"_allVariants_3sp1p2_48\",\"variant16\":\"_variant16_3sp1p2_53\",\"variant20\":\"_variant20_3sp1p2_54\",\"variant24\":\"_variant24_3sp1p2_55\",\"variant28\":\"_variant28_3sp1p2_58\"}"],"mappings":"AAAA,eAAe;EAAC,QAAO,gBAAR;EAAyB,UAAS,mBAAlC;EAAsD,SAAQ,kBAA9D;EAAiF,SAAQ,kBAAzF;EAA4G,SAAQ,kBAApH;EAAuI,SAAQ,kBAA/I;EAAkK,QAAO,iBAAzK;EAA2L,eAAc,wBAAzM;EAAkO,aAAY,sBAA9O;EAAqQ,aAAY,sBAAjR;EAAwS,aAAY,sBAApT;EAA2U,aAAY;AAAvV,CAAf"}
1
+ {"version":3,"file":"index.css.js","names":[],"sources":["index.css.js"],"sourcesContent":["export default {\"icon\":\"_icon_1npbgia_4\",\"sizeXS\":\"_sizeXS_1npbgia_14\",\"sizeS\":\"_sizeS_1npbgia_18\",\"sizeM\":\"_sizeM_1npbgia_22\",\"sizeL\":\"_sizeL_1npbgia_26\",\"light\":\"_light_1npbgia_30\",\"dark\":\"_dark_1npbgia_34\",\"allVariants\":\"_allVariants_1npbgia_48\",\"variant16\":\"_variant16_1npbgia_53\",\"variant20\":\"_variant20_1npbgia_54\",\"variant24\":\"_variant24_1npbgia_55\",\"variant28\":\"_variant28_1npbgia_58\"}"],"mappings":"AAAA,eAAe;EAAC,QAAO,iBAAR;EAA0B,UAAS,oBAAnC;EAAwD,SAAQ,mBAAhE;EAAoF,SAAQ,mBAA5F;EAAgH,SAAQ,mBAAxH;EAA4I,SAAQ,mBAApJ;EAAwK,QAAO,kBAA/K;EAAkM,eAAc,yBAAhN;EAA0O,aAAY,uBAAtP;EAA8Q,aAAY,uBAA1R;EAAkT,aAAY,uBAA9T;EAAsV,aAAY;AAAlW,CAAf"}
package/lib/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.p.css","../../colors/src/public-api.p.css","<no source>","../src/api.p.css"],"names":[],"mappings":"AAGA;ECKE;;;GAGC;EACD,wCAAyC;EAgBzC,wIAA6I;EAC7I,yEAA0E;ADlB5E;ACgFE;ADxFF;ICyFI,kOAAkR;IAClR,8OAAsS;IACtS,8OAAsS;IACtS,oRAAgT;IAChT,mRAAgT;ADrFpT;ECsFE;AAEA;ADhGF;ICiGI,mNAAgD;IAChD,8SAAwD;IACxD,4SAAwD;IACxD,+NAA4D;IAC5D,sTAA4D;AD7FhE;EC8FE;ACzGF;;EFOE,0DAA2D;;EAE3D,iCAAkC;EAClC;CEVF;AFaA;EGVE,uBAAwB;AHY1B;AAEA;EGXE,uBAAwB;AHa1B;AAEA;EGZE,uBAAwB;AHc1B;AAEA;EGbE,uBAAwB;AHe1B;AAEA;EACE,iBAAkB;EGdlB,qMAAwE;AHgB1E;AACA;EACE,iBAAkB;EGlBlB,qMAAwE;AHoB1E;AAEA;EACE;IACE,sBAAuB;EACzB;EACA;IACE,wBAAyB;EAC3B;AACF;AAEA;EACE,qEAAsE;EACtE,wBAAyB;AAC3B;AAEA;;;EAGE,YAAa;AACf;AACA;EACE,aAAc;AAChB;AACA;EACE;IACE,aAAc;EAChB;EACA;IACE,YAAa;EACf;AACF;AACA;EACE;IACE,aAAc;EAChB;EACA;IACE,YAAa;EACf;AACF;AACA;EACE;IACE,aAAc;EAChB;EACA;IACE,YAAa;EACf;AACF","file":"index.css","sourcesContent":["@import '@rescui/colors/src/public-api.p.css';\n@import './api.p.css';\n\n.icon {\n @mixin rs-theme-env;\n @mixin rs-primary-colors-env;\n\n fill: var(--_rs-icons-themed-fill-or-initial, currentcolor);\n\n width: var(--rs-icons-width, auto);\n height: var(--rs-icons-height, var(--_rs-icons-height));\n}\n\n.sizeXS {\n @mixin icon-size-xs;\n}\n\n.sizeS {\n @mixin icon-size-s;\n}\n\n.sizeM {\n @mixin icon-size-m;\n}\n\n.sizeL {\n @mixin icon-size-l;\n}\n\n.light {\n --rs-theme-dark: 0;\n @mixin icon-themed-fill-true;\n}\n.dark {\n --rs-theme-dark: 1;\n @mixin icon-themed-fill-true;\n}\n\n@keyframes :global(rs-icon-rotate) {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.allVariants {\n aspect-ratio: var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);\n container: rs-icon / size;\n}\n\n.variant16,\n.variant20,\n.variant24 {\n display: none;\n}\n.variant28 {\n display: block;\n}\n@container rs-icon (max-height: 24px) {\n .variant24 {\n display: block;\n }\n .variant28 {\n display: none;\n }\n}\n@container rs-icon (max-height: 20px) {\n .variant20 {\n display: block;\n }\n .variant24 {\n display: none;\n }\n}\n@container rs-icon (max-height: 16px) {\n .variant16 {\n display: block;\n }\n .variant20 {\n display: none;\n }\n}\n","@import './simple-vars.p.css';\n\n/**\nSet \"protected\" theme variables. The most important variables are `--_rs-theme-dark-coefficient` and\n`--_rs-theme-light-coefficient`. They are used to calculate themed colors.\n@mixin\n */\n@define-mixin rs-theme-env {\n --_rs-theme-dark: var(\n --_rs-internal-force-theme-dark-consult-rescui-before-using,\n var(--rs-theme-dark, 0)\n );\n --_rs-theme-flip: var(--rs-theme-flip, 0);\n /*\n We want to achieve following:\n 1. If --rs-theme-flip is 0 and --rs-theme-dark is 0, then --_rs-theme-dark-coefficient should be 0\n 2. If --rs-theme-flip is 1 and --rs-theme-dark is 0, then --_rs-theme-dark-coefficient should be 1\n 3. If --rs-theme-flip is 0 and --rs-theme-dark is 1, then --_rs-theme-dark-coefficient should be 1\n 4. If --rs-theme-flip is 1 and --rs-theme-dark is 1, then --_rs-theme-dark-coefficient should be 0\n\n Basically, we want to flip --rs-theme-dark value if --rs-theme-flip is 1.\n Logical XOR operation is exactly what we need here:\n --_rs-theme-dark-coefficient = --rs-theme-dark XOR --rs-theme-flip\n\n Mathematically, XOR operation can be expressed as:\n A XOR B = A * (1 - B) + B * (1 - A)\n\n */\n --_rs-theme-dark-coefficient: calc(var(--_rs-theme-dark) * (1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip) * (1 - var(--_rs-theme-dark)));\n --_rs-theme-light-coefficient: calc(1 - var(--_rs-theme-dark-coefficient));\n}\n\n\n\n$_rs-color-primary-light-theme-r: 107;\n$_rs-color-primary-light-theme-g: 87;\n/*$_rs-color-primary-light-theme-b: 255;*/\n\n$_rs-color-primary-dark-theme-r: 132;\n$_rs-color-primary-dark-theme-g: 115;\n/* $_rs-color-primary-dark-theme-b: 255; */\n\n$_rs-color-primary-r: calc($_rs-color-primary-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-g: calc($_rs-color-primary-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-b: 255; /* calc($_rs-color-primary-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-b * var(--_rs-theme-dark-coefficient, 0)); */\n\n$_rs-color-primary-dim-light-theme-r: 137;\n$_rs-color-primary-dim-light-theme-g: 121;\n$_rs-color-primary-dim-light-theme-b: 255;\n\n$_rs-color-primary-dim-dark-theme-r: 111;\n$_rs-color-primary-dim-dark-theme-g: 97;\n$_rs-color-primary-dim-dark-theme-b: 210;\n\n$_rs-color-primary-dim-r: calc($_rs-color-primary-dim-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-dim-g: calc($_rs-color-primary-dim-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-dim-b: calc($_rs-color-primary-dim-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-b * var(--_rs-theme-dark-coefficient, 0));\n\n\n$_rs-color-primary-fog-light-theme-r: 225;\n$_rs-color-primary-fog-light-theme-g: 221;\n$_rs-color-primary-fog-light-theme-b: 255;\n\n$_rs-color-primary-fog-dark-theme-r: 46;\n$_rs-color-primary-fog-dark-theme-g: 43;\n$_rs-color-primary-fog-dark-theme-b: 73;\n\n$_rs-color-primary-fog-r: calc($_rs-color-primary-fog-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-fog-g: calc($_rs-color-primary-fog-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-fog-b: calc($_rs-color-primary-fog-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-b * var(--_rs-theme-dark-coefficient, 0));\n\n\n$_rs-fog-coefficient-light-theme: 0.2;\n$_rs-fog-coefficient-dark-theme: 0.3;\n\n$_rs-fog-coefficient: calc($_rs-fog-coefficient-light-theme * var(--_rs-theme-light-coefficient, 1) + $_rs-fog-coefficient-dark-theme * var(--_rs-theme-dark-coefficient, 0));\n\n$_rs-color-primary-fallback: rgb($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b);\n$_rs-color-primary-dim-fallback: rgb($_rs-color-primary-dim-r, $_rs-color-primary-dim-g, $_rs-color-primary-dim-b);\n$_rs-color-primary-fog-fallback: rgb($_rs-color-primary-fog-r, $_rs-color-primary-fog-g, $_rs-color-primary-fog-b);\n\n$_rs-color-primary-t-dim-fallback: rgba($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b, 0.8);\n$_rs-color-primary-t-fog-fallback: rgba($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b, $_rs-fog-coefficient);\n\n/**\nSet \"protected\" primary colors variables.\nIt uses `color-mix` function if the browser supports it. Otherwise, it uses manual calculations for the r-g-b parts of the primary colors.\nRequires `rs-theme-env` mixin.\n@mixin\n */\n@define-mixin rs-primary-colors-env {\n @supports (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n --_rs-color-primary: color-mix(in srgb, var(--rs-color-primary-light-theme, $rs-color-primary-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, $rs-color-primary-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n --_rs-color-primary-dim: color-mix(in srgb, var(--rs-color-primary-dim-light-theme, $rs-color-primary-dim-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, $rs-color-primary-dim-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n --_rs-color-primary-fog: color-mix(in srgb, var(--rs-color-primary-fog-light-theme, $rs-color-primary-fog-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, $rs-color-primary-fog-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n --_rs-color-primary-t-dim: color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, $rs-color-primary-t-dim-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, $rs-color-primary-t-dim-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n --_rs-color-primary-t-fog: color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, $rs-color-primary-t-fog-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, $rs-color-primary-t-fog-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n }\n\n @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n --_rs-color-primary: $_rs-color-primary-fallback;\n --_rs-color-primary-dim: $_rs-color-primary-dim-fallback;\n --_rs-color-primary-fog: $_rs-color-primary-fog-fallback;\n --_rs-color-primary-t-dim: $_rs-color-primary-t-dim-fallback;\n --_rs-color-primary-t-fog: $_rs-color-primary-t-fog-fallback;\n }\n}\n\n$_rs-color-danger-light-theme-r: 204;\n$_rs-color-danger-light-theme-g: 20;\n$_rs-color-danger-light-theme-b: 0;\n\n$_rs-color-danger-dark-theme-r: 255;\n$_rs-color-danger-dark-theme-g: 101;\n$_rs-color-danger-dark-theme-b: 83;\n\n$_rs-color-danger-r: calc($_rs-color-danger-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-danger-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-danger-g: calc($_rs-color-danger-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-danger-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-danger-b: calc($_rs-color-danger-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-danger-dark-theme-b * var(--_rs-theme-dark-coefficient, 0));\n\n$_rs-color-danger-fallback: rgb($_rs-color-danger-r, $_rs-color-danger-g, $_rs-color-danger-b);\n$_rs-color-danger-bg-fallback: rgba($_rs-color-danger-r, $_rs-color-danger-g, $_rs-color-danger-b, 0.2);\n\n/**\nSet \"protected\" danger colors variables.\nIt uses `color-mix` function if the browser supports it. Otherwise, it uses manual calculations for the r-g-b parts of the danger colors.\nRequires `rs-theme-env` mixin.\n@mixin\n */\n@define-mixin rs-danger-colors-env {\n @supports (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n --_rs-color-danger: color-mix(in srgb, $rs-color-danger-light-theme calc(100% * var(--_rs-theme-light-coefficient, 1)), $rs-color-danger-dark-theme calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n --_rs-color-danger-bg: color-mix(in srgb, $rs-color-danger-bg-light-theme calc(100% * var(--_rs-theme-light-coefficient, 1)), $rs-color-danger-bg-dark-theme calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n }\n\n @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n --_rs-color-danger: $_rs-color-danger-fallback;\n --_rs-color-danger-bg: $_rs-color-danger-bg-fallback;\n }\n}\n",null,"@import '@rescui/colors/src/auto-vars.p.css';\n\n@define-mixin icon-size-xs {\n --_rs-icons-height: 16px;\n}\n@define-mixin icon-size-s {\n --_rs-icons-height: 20px;\n}\n@define-mixin icon-size-m {\n --_rs-icons-height: 24px;\n}\n@define-mixin icon-size-l {\n --_rs-icons-height: 28px;\n}\n\n@define-mixin icon-themed-fill-true {\n --_rs-icons-themed-fill-or-initial: rgb($rs-color-light_black-dark_white)\n}\n@define-mixin icon-themed-fill-false {\n --_rs-icons-themed-fill-or-initial: initial;\n}\n"]}
1
+ {"version":3,"sources":["../../colors/src/public-api.p.css","../src/index.p.css","<no source>","../src/api.p.css"],"names":[],"mappings":"AAEA;EACE,iBAAkB;EAClB,aAAc;EACd,eAAgB;AAClB;ACHA;EDWE;;;GAGC;EACD,wCAAyC;EAgBzC,wIAA6I;EAC7I,yEAA0E;ACxB5E;ADsFE;AC9FF;ID+FI,kOAAkR;IAClR,8OAAsS;IACtS,8OAAsS;IACtS,oRAAgT;IAChT,mRAAgT;AC3FpT;ED4FE;AAEA;ACtGF;IDuGI,mNAAgD;IAChD,8SAAwD;IACxD,4SAAwD;IACxD,+NAA4D;IAC5D,sTAA4D;ACnGhE;EDoGE;AE/GF;;EDOE,0DAA2D;;EAE3D,iCAAkC;EAClC;CCVF;ADaA;EEVE,uBAAwB;AFY1B;AAEA;EEXE,uBAAwB;AFa1B;AAEA;EEZE,uBAAwB;AFc1B;AAEA;EEbE,uBAAwB;AFe1B;AAEA;EACE,iBAAkB;EEdlB,qMAAwE;AFgB1E;AACA;EACE,iBAAkB;EElBlB,qMAAwE;AFoB1E;AAEA;EACE;IACE,sBAAuB;EACzB;EACA;IACE,wBAAyB;EAC3B;AACF;AAEA;EACE,qEAAsE;EACtE,wBAAyB;AAC3B;AAEA;;;EAGE,YAAa;AACf;AACA;EACE,aAAc;AAChB;AACA;EACE;IACE,aAAc;EAChB;EACA;IACE,YAAa;EACf;AACF;AACA;EACE;IACE,aAAc;EAChB;EACA;IACE,YAAa;EACf;AACF;AACA;EACE;IACE,aAAc;EAChB;EACA;IACE,YAAa;EACf;AACF","file":"index.css","sourcesContent":["@import './simple-vars.p.css';\n\n@property --_rs-theme-dark-coefficient {\n syntax: '<number>';\n inherits: true;\n initial-value: 0;\n}\n\n/**\nSet \"protected\" theme variables. The most important variables are `--_rs-theme-dark-coefficient` and\n`--_rs-theme-light-coefficient`. They are used to calculate themed colors.\n@mixin\n */\n@define-mixin rs-theme-env {\n --_rs-theme-dark: var(\n --_rs-internal-force-theme-dark-consult-rescui-before-using,\n var(--rs-theme-dark, 0)\n );\n --_rs-theme-flip: var(--rs-theme-flip, 0);\n /*\n We want to achieve following:\n 1. If --rs-theme-flip is 0 and --rs-theme-dark is 0, then --_rs-theme-dark-coefficient should be 0\n 2. If --rs-theme-flip is 1 and --rs-theme-dark is 0, then --_rs-theme-dark-coefficient should be 1\n 3. If --rs-theme-flip is 0 and --rs-theme-dark is 1, then --_rs-theme-dark-coefficient should be 1\n 4. If --rs-theme-flip is 1 and --rs-theme-dark is 1, then --_rs-theme-dark-coefficient should be 0\n\n Basically, we want to flip --rs-theme-dark value if --rs-theme-flip is 1.\n Logical XOR operation is exactly what we need here:\n --_rs-theme-dark-coefficient = --rs-theme-dark XOR --rs-theme-flip\n\n Mathematically, XOR operation can be expressed as:\n A XOR B = A * (1 - B) + B * (1 - A)\n\n */\n --_rs-theme-dark-coefficient: calc(var(--_rs-theme-dark) * (1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip) * (1 - var(--_rs-theme-dark)));\n --_rs-theme-light-coefficient: calc(1 - var(--_rs-theme-dark-coefficient));\n}\n\n\n\n$_rs-color-primary-light-theme-r: 107;\n$_rs-color-primary-light-theme-g: 87;\n/*$_rs-color-primary-light-theme-b: 255;*/\n\n$_rs-color-primary-dark-theme-r: 132;\n$_rs-color-primary-dark-theme-g: 115;\n/* $_rs-color-primary-dark-theme-b: 255; */\n\n$_rs-color-primary-r: calc($_rs-color-primary-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-g: calc($_rs-color-primary-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-b: 255; /* calc($_rs-color-primary-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-b * var(--_rs-theme-dark-coefficient, 0)); */\n\n$_rs-color-primary-dim-light-theme-r: 137;\n$_rs-color-primary-dim-light-theme-g: 121;\n$_rs-color-primary-dim-light-theme-b: 255;\n\n$_rs-color-primary-dim-dark-theme-r: 111;\n$_rs-color-primary-dim-dark-theme-g: 97;\n$_rs-color-primary-dim-dark-theme-b: 210;\n\n$_rs-color-primary-dim-r: calc($_rs-color-primary-dim-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-dim-g: calc($_rs-color-primary-dim-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-dim-b: calc($_rs-color-primary-dim-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-b * var(--_rs-theme-dark-coefficient, 0));\n\n\n$_rs-color-primary-fog-light-theme-r: 225;\n$_rs-color-primary-fog-light-theme-g: 221;\n$_rs-color-primary-fog-light-theme-b: 255;\n\n$_rs-color-primary-fog-dark-theme-r: 46;\n$_rs-color-primary-fog-dark-theme-g: 43;\n$_rs-color-primary-fog-dark-theme-b: 73;\n\n$_rs-color-primary-fog-r: calc($_rs-color-primary-fog-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-fog-g: calc($_rs-color-primary-fog-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-fog-b: calc($_rs-color-primary-fog-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-b * var(--_rs-theme-dark-coefficient, 0));\n\n\n$_rs-fog-coefficient-light-theme: 0.2;\n$_rs-fog-coefficient-dark-theme: 0.3;\n\n$_rs-fog-coefficient: calc($_rs-fog-coefficient-light-theme * var(--_rs-theme-light-coefficient, 1) + $_rs-fog-coefficient-dark-theme * var(--_rs-theme-dark-coefficient, 0));\n\n$_rs-color-primary-fallback: rgb($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b);\n$_rs-color-primary-dim-fallback: rgb($_rs-color-primary-dim-r, $_rs-color-primary-dim-g, $_rs-color-primary-dim-b);\n$_rs-color-primary-fog-fallback: rgb($_rs-color-primary-fog-r, $_rs-color-primary-fog-g, $_rs-color-primary-fog-b);\n\n$_rs-color-primary-t-dim-fallback: rgba($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b, 0.8);\n$_rs-color-primary-t-fog-fallback: rgba($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b, $_rs-fog-coefficient);\n\n/**\nSet \"protected\" primary colors variables.\nIt uses `color-mix` function if the browser supports it. Otherwise, it uses manual calculations for the r-g-b parts of the primary colors.\nRequires `rs-theme-env` mixin.\n@mixin\n */\n@define-mixin rs-primary-colors-env {\n @supports (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n --_rs-color-primary: color-mix(in srgb, var(--rs-color-primary-light-theme, $rs-color-primary-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, $rs-color-primary-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n --_rs-color-primary-dim: color-mix(in srgb, var(--rs-color-primary-dim-light-theme, $rs-color-primary-dim-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, $rs-color-primary-dim-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n --_rs-color-primary-fog: color-mix(in srgb, var(--rs-color-primary-fog-light-theme, $rs-color-primary-fog-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, $rs-color-primary-fog-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n --_rs-color-primary-t-dim: color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, $rs-color-primary-t-dim-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, $rs-color-primary-t-dim-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n --_rs-color-primary-t-fog: color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, $rs-color-primary-t-fog-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, $rs-color-primary-t-fog-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n }\n\n @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n --_rs-color-primary: $_rs-color-primary-fallback;\n --_rs-color-primary-dim: $_rs-color-primary-dim-fallback;\n --_rs-color-primary-fog: $_rs-color-primary-fog-fallback;\n --_rs-color-primary-t-dim: $_rs-color-primary-t-dim-fallback;\n --_rs-color-primary-t-fog: $_rs-color-primary-t-fog-fallback;\n }\n}\n\n$_rs-color-danger-light-theme-r: 204;\n$_rs-color-danger-light-theme-g: 20;\n$_rs-color-danger-light-theme-b: 0;\n\n$_rs-color-danger-dark-theme-r: 255;\n$_rs-color-danger-dark-theme-g: 101;\n$_rs-color-danger-dark-theme-b: 83;\n\n$_rs-color-danger-r: calc($_rs-color-danger-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-danger-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-danger-g: calc($_rs-color-danger-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-danger-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-danger-b: calc($_rs-color-danger-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-danger-dark-theme-b * var(--_rs-theme-dark-coefficient, 0));\n\n$_rs-color-danger-fallback: rgb($_rs-color-danger-r, $_rs-color-danger-g, $_rs-color-danger-b);\n$_rs-color-danger-bg-fallback: rgba($_rs-color-danger-r, $_rs-color-danger-g, $_rs-color-danger-b, 0.2);\n\n/**\nSet \"protected\" danger colors variables.\nIt uses `color-mix` function if the browser supports it. Otherwise, it uses manual calculations for the r-g-b parts of the danger colors.\nRequires `rs-theme-env` mixin.\n@mixin\n */\n@define-mixin rs-danger-colors-env {\n @supports (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n --_rs-color-danger: color-mix(in srgb, $rs-color-danger-light-theme calc(100% * var(--_rs-theme-light-coefficient, 1)), $rs-color-danger-dark-theme calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n --_rs-color-danger-bg: color-mix(in srgb, $rs-color-danger-bg-light-theme calc(100% * var(--_rs-theme-light-coefficient, 1)), $rs-color-danger-bg-dark-theme calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n }\n\n @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n --_rs-color-danger: $_rs-color-danger-fallback;\n --_rs-color-danger-bg: $_rs-color-danger-bg-fallback;\n }\n}\n","@import '@rescui/colors/src/public-api.p.css';\n@import './api.p.css';\n\n.icon {\n @mixin rs-theme-env;\n @mixin rs-primary-colors-env;\n\n fill: var(--_rs-icons-themed-fill-or-initial, currentcolor);\n\n width: var(--rs-icons-width, auto);\n height: var(--rs-icons-height, var(--_rs-icons-height));\n}\n\n.sizeXS {\n @mixin icon-size-xs;\n}\n\n.sizeS {\n @mixin icon-size-s;\n}\n\n.sizeM {\n @mixin icon-size-m;\n}\n\n.sizeL {\n @mixin icon-size-l;\n}\n\n.light {\n --rs-theme-dark: 0;\n @mixin icon-themed-fill-true;\n}\n.dark {\n --rs-theme-dark: 1;\n @mixin icon-themed-fill-true;\n}\n\n@keyframes :global(rs-icon-rotate) {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.allVariants {\n aspect-ratio: var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);\n container: rs-icon / size;\n}\n\n.variant16,\n.variant20,\n.variant24 {\n display: none;\n}\n.variant28 {\n display: block;\n}\n@container rs-icon (max-height: 24px) {\n .variant24 {\n display: block;\n }\n .variant28 {\n display: none;\n }\n}\n@container rs-icon (max-height: 20px) {\n .variant20 {\n display: block;\n }\n .variant24 {\n display: none;\n }\n}\n@container rs-icon (max-height: 16px) {\n .variant16 {\n display: block;\n }\n .variant20 {\n display: none;\n }\n}\n",null,"@import '@rescui/colors/src/auto-vars.p.css';\n\n@define-mixin icon-size-xs {\n --_rs-icons-height: 16px;\n}\n@define-mixin icon-size-s {\n --_rs-icons-height: 20px;\n}\n@define-mixin icon-size-m {\n --_rs-icons-height: 24px;\n}\n@define-mixin icon-size-l {\n --_rs-icons-height: 28px;\n}\n\n@define-mixin icon-themed-fill-true {\n --_rs-icons-themed-fill-or-initial: rgb($rs-color-light_black-dark_white)\n}\n@define-mixin icon-themed-fill-false {\n --_rs-icons-themed-fill-or-initial: initial;\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/icons",
3
- "version": "1.8.3",
3
+ "version": "1.8.4",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -31,10 +31,10 @@
31
31
  },
32
32
  "devDependencies": {
33
33
  "@rescui/babel-plugin-postcss-modules": "^0.0.5",
34
- "@rescui/colors": "^0.3.2",
35
- "@rescui/postcss-preset-library": "^0.2.2",
34
+ "@rescui/colors": "^0.3.3",
35
+ "@rescui/postcss-preset-library": "^0.2.3",
36
36
  "@rescui/scripts": "^0.5.2",
37
- "@rescui/typography": "^0.27.3",
37
+ "@rescui/typography": "^0.27.4",
38
38
  "postcss-modules": "^4.0.0",
39
39
  "postsvg": "2.2.7",
40
40
  "react-copy-to-clipboard": "^5.0.3"
@@ -45,5 +45,5 @@
45
45
  "svg-to-jsx": "rescui-scripts svg-to-jsx --src=svg --out=lib --template=template.js --ts-template=ts-template.js --typings-dir=lib"
46
46
  },
47
47
  "nx": {},
48
- "gitHead": "7614b4519a4716fbf1151d94c97fda48eab60800"
48
+ "gitHead": "3711cbfc0c797014395421b008aa5331d6d47c6e"
49
49
  }