jvetrau-ds 0.2.26 → 0.2.27
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.
- package/components/logo/assets/brandcopilot-favicon.svg +4 -0
- package/components/logo/assets/dmpatterns-favicon.svg +20 -0
- package/components/logo/logo.cjs +16 -6
- package/components/logo/logo.cjs.map +1 -1
- package/components/logo/logo.css +72 -1
- package/components/logo/logo.d.ts +1 -1
- package/components/logo/logo.js +14 -6
- package/components/logo/logo.js.map +1 -1
- package/components/surface/surface-presentation.cjs +1 -0
- package/components/surface/surface-presentation.cjs.map +1 -1
- package/components/surface/surface-presentation.js +1 -0
- package/components/surface/surface-presentation.js.map +1 -1
- package/components/surface/surface.css +33 -0
- package/package.json +1 -1
- package/styles.css +105 -1
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="53" height="45" viewBox="0 0 53 45" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M52.7979 45H0.689453L7.20312 33.75H8.93652L3.29102 43.5H50.1953L26.7432 2.99414L18.1172 17.8916C17.6637 17.6737 17.1924 17.4867 16.7051 17.3359L26.7432 0L52.7979 45Z" fill="#C0E200"/>
|
|
3
|
+
<path d="M13.6406 18.2812C17.3332 18.2812 20.5026 20.5191 21.8613 23.7109C22.5064 23.4479 23.2123 23.3027 23.9521 23.3027C27.0078 23.3027 29.4852 25.7763 29.4854 28.8271C29.4854 30.1625 29.0106 31.3877 28.2207 32.3428H1.22754C0.885188 31.7518 0.688477 31.0658 0.688477 30.334C0.688566 28.1151 2.4906 26.3164 4.71289 26.3164C4.72718 26.3164 4.74161 26.3163 4.75586 26.3164C5.19796 21.8058 9.00695 18.2814 13.6406 18.2812ZM40.8086 9.84375C44.3329 9.84379 47.1895 12.697 47.1895 16.2158C47.1895 16.2238 47.1895 16.2322 47.1895 16.2402C48.7634 16.4362 49.9814 17.7768 49.9814 19.4014C49.9814 20.023 49.8035 20.6035 49.4951 21.0938H40.583L35.6152 12.5137C36.7727 10.8978 38.6673 9.8438 40.8086 9.84375Z" fill="#F34BCC"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<mask id="mask0_206_111" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="41" height="41">
|
|
3
|
+
<circle cx="20.5" cy="20.5" r="20.5" fill="#C4C4C4"/>
|
|
4
|
+
</mask>
|
|
5
|
+
<g mask="url(#mask0_206_111)">
|
|
6
|
+
<rect x="-8.84375" y="-4.01953" width="49.8431" height="65.1176" fill="#F9EC0E"/>
|
|
7
|
+
</g>
|
|
8
|
+
<g clip-path="url(#clip0_206_111)">
|
|
9
|
+
<path d="M9.45752 20.996L27.8217 15.2792C28.816 14.9697 29.9125 15.5144 29.9125 16.3179V25.6741C29.9125 26.4776 28.816 27.0223 27.8217 26.7127L9.45752 20.996Z" fill="white" fill-opacity="0.06"/>
|
|
10
|
+
<path d="M17.1362 15.9835C18.1138 17.5253 18.6423 19.2392 18.6787 20.9851C18.715 22.731 18.2581 24.4594 17.3453 26.0288L16.1593 25.5437C16.9809 24.1312 17.3921 22.5757 17.3594 21.0044C17.3267 19.4331 16.851 17.8906 15.9711 16.503L17.1362 15.9835Z" fill="#1F1F1F"/>
|
|
11
|
+
<path d="M22.0635 13.7859C23.4547 15.9799 24.2068 18.4188 24.2585 20.9033C24.3102 23.3878 23.66 25.8472 22.3611 28.0806L21.1797 27.5974C22.3878 25.5204 22.9925 23.2331 22.9444 20.9225C22.8963 18.612 22.1968 16.3437 20.903 14.3033L22.0635 13.7859Z" fill="#1F1F1F"/>
|
|
12
|
+
<path d="M27.5903 11.3217C29.4451 14.2471 30.448 17.499 30.517 20.8116C30.5859 24.1243 29.719 27.4036 27.987 30.3814L26.862 29.9212C28.5073 27.0923 29.3309 23.977 29.2654 20.83C29.1999 17.6829 28.2471 14.5936 26.4851 11.8145L27.5903 11.3217Z" fill="#1F1F1F"/>
|
|
13
|
+
<path d="M13.3274 20.9965C13.3274 22.0651 12.4611 22.9314 11.3925 22.9314C10.3238 22.9314 9.45752 22.0651 9.45752 20.9965C9.45752 19.9278 10.3238 19.0615 11.3925 19.0615C12.4611 19.0615 13.3274 19.9278 13.3274 20.9965Z" fill="#1F1F1F"/>
|
|
14
|
+
</g>
|
|
15
|
+
<defs>
|
|
16
|
+
<clipPath id="clip0_206_111">
|
|
17
|
+
<rect width="22.4045" height="19.3493" fill="white" transform="translate(9.45752 11.3213)"/>
|
|
18
|
+
</clipPath>
|
|
19
|
+
</defs>
|
|
20
|
+
</svg>
|
package/components/logo/logo.cjs
CHANGED
|
@@ -3,15 +3,19 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
require('./logo.css');
|
|
5
5
|
var classnames = require('../helpers/classnames');
|
|
6
|
+
var brandcopilotFavicon = require('./assets/brandcopilot-favicon.svg');
|
|
6
7
|
var brandcopilotSymbol = require('./assets/brandcopilot-symbol.svg');
|
|
7
8
|
var brandcopilotWordmark = require('./assets/brandcopilot-wordmark.svg');
|
|
9
|
+
var dmpatternsFavicon = require('./assets/dmpatterns-favicon.svg');
|
|
8
10
|
var dmpatternsSymbol = require('./assets/dmpatterns-symbol.svg');
|
|
9
11
|
var dmpatternsWordmark = require('./assets/dmpatterns-wordmark.svg');
|
|
10
12
|
|
|
11
13
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
14
|
|
|
15
|
+
var brandcopilotFavicon__default = /*#__PURE__*/_interopDefault(brandcopilotFavicon);
|
|
13
16
|
var brandcopilotSymbol__default = /*#__PURE__*/_interopDefault(brandcopilotSymbol);
|
|
14
17
|
var brandcopilotWordmark__default = /*#__PURE__*/_interopDefault(brandcopilotWordmark);
|
|
18
|
+
var dmpatternsFavicon__default = /*#__PURE__*/_interopDefault(dmpatternsFavicon);
|
|
15
19
|
var dmpatternsSymbol__default = /*#__PURE__*/_interopDefault(dmpatternsSymbol);
|
|
16
20
|
var dmpatternsWordmark__default = /*#__PURE__*/_interopDefault(dmpatternsWordmark);
|
|
17
21
|
|
|
@@ -19,22 +23,26 @@ const logoBrands = {
|
|
|
19
23
|
dmpatterns: {
|
|
20
24
|
label: "\u041F\u0430\u0442\u0442\u0435\u0440\u043D\u044B \u0434\u0438\u0437\u0430\u0439\u043D-\u043C\u0435\u043D\u0435\u0434\u0436\u043C\u0435\u043D\u0442\u0430",
|
|
21
25
|
symbol: dmpatternsSymbol__default.default,
|
|
22
|
-
wordmark: dmpatternsWordmark__default.default
|
|
26
|
+
wordmark: dmpatternsWordmark__default.default,
|
|
27
|
+
favicon: dmpatternsFavicon__default.default
|
|
23
28
|
},
|
|
24
29
|
brandcopilot: {
|
|
25
30
|
label: "Brandcopilot",
|
|
26
31
|
symbol: brandcopilotSymbol__default.default,
|
|
27
|
-
wordmark: brandcopilotWordmark__default.default
|
|
32
|
+
wordmark: brandcopilotWordmark__default.default,
|
|
33
|
+
favicon: brandcopilotFavicon__default.default
|
|
28
34
|
},
|
|
29
35
|
pdigest: {
|
|
30
36
|
label: "PDigest",
|
|
31
37
|
symbol: dmpatternsSymbol__default.default,
|
|
32
|
-
wordmark: dmpatternsWordmark__default.default
|
|
38
|
+
wordmark: dmpatternsWordmark__default.default,
|
|
39
|
+
favicon: dmpatternsFavicon__default.default
|
|
33
40
|
},
|
|
34
41
|
retrack: {
|
|
35
42
|
label: "Retrack",
|
|
36
43
|
symbol: dmpatternsSymbol__default.default,
|
|
37
|
-
wordmark: dmpatternsWordmark__default.default
|
|
44
|
+
wordmark: dmpatternsWordmark__default.default,
|
|
45
|
+
favicon: dmpatternsFavicon__default.default
|
|
38
46
|
}
|
|
39
47
|
};
|
|
40
48
|
const Logo = ({
|
|
@@ -46,12 +54,14 @@ const Logo = ({
|
|
|
46
54
|
}) => {
|
|
47
55
|
const logo = logoBrands[brand];
|
|
48
56
|
const accessibleLabel = label ?? logo.label;
|
|
57
|
+
const artwork = mode === "favicon" ? logo.favicon : logo.symbol;
|
|
49
58
|
const classes = classnames.classnames(
|
|
50
59
|
"logo",
|
|
51
60
|
`logo--${brand}`,
|
|
52
61
|
className,
|
|
53
62
|
{
|
|
54
|
-
"logo--symbol": mode === "symbol"
|
|
63
|
+
"logo--symbol": mode === "symbol",
|
|
64
|
+
"logo--favicon": mode === "favicon"
|
|
55
65
|
}
|
|
56
66
|
);
|
|
57
67
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -65,7 +75,7 @@ const Logo = ({
|
|
|
65
75
|
"img",
|
|
66
76
|
{
|
|
67
77
|
className: "logo__symbol",
|
|
68
|
-
src:
|
|
78
|
+
src: artwork,
|
|
69
79
|
alt: "",
|
|
70
80
|
"aria-hidden": "true"
|
|
71
81
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/logo/logo.tsx"],"names":["dmpatternsSymbol","dmpatternsWordmark","brandcopilotSymbol","brandcopilotWordmark","classnames","jsxs","jsx"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/logo/logo.tsx"],"names":["dmpatternsSymbol","dmpatternsWordmark","dmpatternsFavicon","brandcopilotSymbol","brandcopilotWordmark","brandcopilotFavicon","classnames","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,UAAA,GAGF;AAAA,EACF,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,0JAAA;AAAA,IACP,MAAA,EAAQA,iCAAA;AAAA,IACR,QAAA,EAAUC,mCAAA;AAAA,IACV,OAAA,EAASC;AAAA,GACX;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,KAAA,EAAO,cAAA;AAAA,IACP,MAAA,EAAQC,mCAAA;AAAA,IACR,QAAA,EAAUC,qCAAA;AAAA,IACV,OAAA,EAASC;AAAA,GACX;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,MAAA,EAAQL,iCAAA;AAAA,IACR,QAAA,EAAUC,mCAAA;AAAA,IACV,OAAA,EAASC;AAAA,GACX;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,MAAA,EAAQF,iCAAA;AAAA,IACR,QAAA,EAAUC,mCAAA;AAAA,IACV,OAAA,EAASC;AAAA;AAEb,CAAA;AASA,MAAM,OAA4B,CAAC;AAAA,EACjC,KAAA,GAAQ,YAAA;AAAA,EACR,IAAA,GAAO,MAAA;AAAA,EACP,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,IAAA,GAAO,WAAW,KAAK,CAAA;AAC7B,EAAA,MAAM,eAAA,GAAkB,SAAS,IAAA,CAAK,KAAA;AACtC,EAAA,MAAM,OAAA,GACJ,IAAA,KAAS,SAAA,GACL,IAAA,CAAK,UACL,IAAA,CAAK,MAAA;AAEX,EAAA,MAAM,OAAA,GAAUI,qBAAA;AAAA,IACd,MAAA;AAAA,IACA,SAAS,KAAK,CAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA;AAAA,MACE,gBAAgB,IAAA,KAAS,QAAA;AAAA,MACzB,iBAAiB,IAAA,KAAS;AAAA;AAC5B,GACF;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,YAAA,EAAY,eAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,cAAA;AAAA,YACV,GAAA,EAAK,OAAA;AAAA,YACL,GAAA,EAAI,EAAA;AAAA,YACJ,aAAA,EAAY;AAAA;AAAA,SACd;AAAA,QAEC,IAAA,KAAS,MAAA,KACP,KAAA,KAAU,cAAA,mBACTA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qCAAA;AAAA,YACV,aAAA,EAAY,MAAA;AAAA,YACZ,KAAA,EAAO;AAAA,cACL,eAAA,EAAiB,CAAA,KAAA,EAAQ,IAAA,CAAK,QAAQ,CAAA,EAAA,CAAA;AAAA,cACtC,SAAA,EAAW,CAAA,KAAA,EAAQ,IAAA,CAAK,QAAQ,CAAA,EAAA;AAAA;AAClC;AAAA,SACF,mBAEAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,gBAAA;AAAA,YACV,KAAK,IAAA,CAAK,QAAA;AAAA,YACV,GAAA,EAAI,EAAA;AAAA,YACJ,aAAA,EAAY;AAAA;AAAA,SACd;AAAA;AAAA;AAAA,GAEN;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"logo.cjs","sourcesContent":["import React from 'react';\nimport './logo.css';\nimport { classnames } from '../helpers/classnames';\n\nimport brandcopilotFavicon from './assets/brandcopilot-favicon.svg';\nimport brandcopilotSymbol from './assets/brandcopilot-symbol.svg';\nimport brandcopilotWordmark from './assets/brandcopilot-wordmark.svg';\nimport dmpatternsFavicon from './assets/dmpatterns-favicon.svg';\nimport dmpatternsSymbol from './assets/dmpatterns-symbol.svg';\nimport dmpatternsWordmark from './assets/dmpatterns-wordmark.svg';\n\nexport type LogoBrand =\n | 'dmpatterns'\n | 'brandcopilot'\n | 'pdigest'\n | 'retrack';\n\nexport type LogoMode =\n | 'full'\n | 'symbol'\n | 'favicon';\n\ninterface LogoBrandDefinition {\n label: string;\n symbol: string;\n wordmark: string;\n favicon: string;\n}\n\nconst logoBrands: Record<\n LogoBrand,\n LogoBrandDefinition\n> = {\n dmpatterns: {\n label: 'Паттерны дизайн-менеджмента',\n symbol: dmpatternsSymbol,\n wordmark: dmpatternsWordmark,\n favicon: dmpatternsFavicon,\n },\n brandcopilot: {\n label: 'Brandcopilot',\n symbol: brandcopilotSymbol,\n wordmark: brandcopilotWordmark,\n favicon: brandcopilotFavicon,\n },\n pdigest: {\n label: 'PDigest',\n symbol: dmpatternsSymbol,\n wordmark: dmpatternsWordmark,\n favicon: dmpatternsFavicon,\n },\n retrack: {\n label: 'Retrack',\n symbol: dmpatternsSymbol,\n wordmark: dmpatternsWordmark,\n favicon: dmpatternsFavicon,\n },\n};\n\nexport interface LogoProps\n extends React.HTMLAttributes<HTMLDivElement> {\n brand?: LogoBrand;\n mode?: LogoMode;\n label?: string;\n}\n\nconst Logo: React.FC<LogoProps> = ({\n brand = 'dmpatterns',\n mode = 'full',\n label,\n className = '',\n ...props\n}) => {\n const logo = logoBrands[brand];\n const accessibleLabel = label ?? logo.label;\n const artwork =\n mode === 'favicon'\n ? logo.favicon\n : logo.symbol;\n\n const classes = classnames(\n 'logo',\n `logo--${brand}`,\n className,\n {\n 'logo--symbol': mode === 'symbol',\n 'logo--favicon': mode === 'favicon',\n },\n );\n\n return (\n <div\n className={classes}\n aria-label={accessibleLabel}\n {...props}\n >\n <img\n className=\"logo__symbol\"\n src={artwork}\n alt=\"\"\n aria-hidden=\"true\"\n />\n\n {mode === 'full' &&\n (brand === 'brandcopilot' ? (\n <span\n className=\"logo__wordmark logo__wordmark--mask\"\n aria-hidden=\"true\"\n style={{\n WebkitMaskImage: `url(\"${logo.wordmark}\")`,\n maskImage: `url(\"${logo.wordmark}\")`,\n }}\n />\n ) : (\n <img\n className=\"logo__wordmark\"\n src={logo.wordmark}\n alt=\"\"\n aria-hidden=\"true\"\n />\n ))}\n </div>\n );\n};\n\nexport default Logo;\n"]}
|
package/components/logo/logo.css
CHANGED
|
@@ -19,50 +19,121 @@
|
|
|
19
19
|
/* motion */
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.logo--symbol
|
|
22
|
+
.logo--symbol,
|
|
23
|
+
.logo--favicon {
|
|
24
|
+
/* color */
|
|
25
|
+
|
|
26
|
+
/* typography */
|
|
27
|
+
|
|
23
28
|
/* size */
|
|
24
29
|
gap: 0;
|
|
30
|
+
|
|
31
|
+
/* border */
|
|
32
|
+
|
|
33
|
+
/* depth */
|
|
34
|
+
|
|
35
|
+
/* motion */
|
|
25
36
|
}
|
|
26
37
|
|
|
27
38
|
.logo--brandcopilot {
|
|
39
|
+
/* color */
|
|
40
|
+
|
|
41
|
+
/* typography */
|
|
42
|
+
|
|
28
43
|
/* size */
|
|
29
44
|
--logo-brandcopilot-height: 45px;
|
|
30
45
|
--logo-brandcopilot-wordmark-width: 79px;
|
|
31
46
|
|
|
32
47
|
align-items: center;
|
|
48
|
+
|
|
49
|
+
/* border */
|
|
50
|
+
|
|
51
|
+
/* depth */
|
|
52
|
+
|
|
53
|
+
/* motion */
|
|
33
54
|
}
|
|
34
55
|
|
|
35
56
|
:where(a, button) .logo {
|
|
57
|
+
/* color */
|
|
58
|
+
|
|
59
|
+
/* typography */
|
|
60
|
+
|
|
61
|
+
/* size */
|
|
62
|
+
|
|
63
|
+
/* border */
|
|
64
|
+
|
|
65
|
+
/* depth */
|
|
66
|
+
|
|
36
67
|
/* motion */
|
|
37
68
|
cursor: pointer;
|
|
38
69
|
}
|
|
39
70
|
|
|
40
71
|
.logo__symbol {
|
|
72
|
+
/* color */
|
|
73
|
+
|
|
74
|
+
/* typography */
|
|
75
|
+
|
|
41
76
|
/* size */
|
|
42
77
|
display: block;
|
|
43
78
|
width: var(--logo-symbol-size);
|
|
44
79
|
height: var(--logo-symbol-size);
|
|
45
80
|
flex-shrink: 0;
|
|
81
|
+
|
|
82
|
+
/* border */
|
|
83
|
+
|
|
84
|
+
/* depth */
|
|
85
|
+
|
|
86
|
+
/* motion */
|
|
46
87
|
}
|
|
47
88
|
|
|
48
89
|
.logo__wordmark {
|
|
90
|
+
/* color */
|
|
91
|
+
|
|
92
|
+
/* typography */
|
|
93
|
+
|
|
49
94
|
/* size */
|
|
50
95
|
display: block;
|
|
51
96
|
width: var(--logo-wordmark-width);
|
|
52
97
|
height: auto;
|
|
53
98
|
flex-shrink: 0;
|
|
99
|
+
|
|
100
|
+
/* border */
|
|
101
|
+
|
|
102
|
+
/* depth */
|
|
103
|
+
|
|
104
|
+
/* motion */
|
|
54
105
|
}
|
|
55
106
|
|
|
56
107
|
.logo--brandcopilot .logo__symbol {
|
|
108
|
+
/* color */
|
|
109
|
+
|
|
110
|
+
/* typography */
|
|
111
|
+
|
|
57
112
|
/* size */
|
|
58
113
|
width: auto;
|
|
59
114
|
height: var(--logo-brandcopilot-height);
|
|
115
|
+
|
|
116
|
+
/* border */
|
|
117
|
+
|
|
118
|
+
/* depth */
|
|
119
|
+
|
|
120
|
+
/* motion */
|
|
60
121
|
}
|
|
61
122
|
|
|
62
123
|
.logo--brandcopilot .logo__wordmark {
|
|
124
|
+
/* color */
|
|
125
|
+
|
|
126
|
+
/* typography */
|
|
127
|
+
|
|
63
128
|
/* size */
|
|
64
129
|
width: var(--logo-brandcopilot-wordmark-width);
|
|
65
130
|
height: var(--logo-brandcopilot-height);
|
|
131
|
+
|
|
132
|
+
/* border */
|
|
133
|
+
|
|
134
|
+
/* depth */
|
|
135
|
+
|
|
136
|
+
/* motion */
|
|
66
137
|
}
|
|
67
138
|
|
|
68
139
|
.logo__wordmark--mask {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './logo.css';
|
|
3
3
|
export type LogoBrand = 'dmpatterns' | 'brandcopilot' | 'pdigest' | 'retrack';
|
|
4
|
-
export type LogoMode = 'full' | 'symbol';
|
|
4
|
+
export type LogoMode = 'full' | 'symbol' | 'favicon';
|
|
5
5
|
export interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
6
|
brand?: LogoBrand;
|
|
7
7
|
mode?: LogoMode;
|
package/components/logo/logo.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import './logo.css';
|
|
3
3
|
import { classnames } from '../helpers/classnames';
|
|
4
|
+
import brandcopilotFavicon from './assets/brandcopilot-favicon.svg';
|
|
4
5
|
import brandcopilotSymbol from './assets/brandcopilot-symbol.svg';
|
|
5
6
|
import brandcopilotWordmark from './assets/brandcopilot-wordmark.svg';
|
|
7
|
+
import dmpatternsFavicon from './assets/dmpatterns-favicon.svg';
|
|
6
8
|
import dmpatternsSymbol from './assets/dmpatterns-symbol.svg';
|
|
7
9
|
import dmpatternsWordmark from './assets/dmpatterns-wordmark.svg';
|
|
8
10
|
|
|
@@ -10,22 +12,26 @@ const logoBrands = {
|
|
|
10
12
|
dmpatterns: {
|
|
11
13
|
label: "\u041F\u0430\u0442\u0442\u0435\u0440\u043D\u044B \u0434\u0438\u0437\u0430\u0439\u043D-\u043C\u0435\u043D\u0435\u0434\u0436\u043C\u0435\u043D\u0442\u0430",
|
|
12
14
|
symbol: dmpatternsSymbol,
|
|
13
|
-
wordmark: dmpatternsWordmark
|
|
15
|
+
wordmark: dmpatternsWordmark,
|
|
16
|
+
favicon: dmpatternsFavicon
|
|
14
17
|
},
|
|
15
18
|
brandcopilot: {
|
|
16
19
|
label: "Brandcopilot",
|
|
17
20
|
symbol: brandcopilotSymbol,
|
|
18
|
-
wordmark: brandcopilotWordmark
|
|
21
|
+
wordmark: brandcopilotWordmark,
|
|
22
|
+
favicon: brandcopilotFavicon
|
|
19
23
|
},
|
|
20
24
|
pdigest: {
|
|
21
25
|
label: "PDigest",
|
|
22
26
|
symbol: dmpatternsSymbol,
|
|
23
|
-
wordmark: dmpatternsWordmark
|
|
27
|
+
wordmark: dmpatternsWordmark,
|
|
28
|
+
favicon: dmpatternsFavicon
|
|
24
29
|
},
|
|
25
30
|
retrack: {
|
|
26
31
|
label: "Retrack",
|
|
27
32
|
symbol: dmpatternsSymbol,
|
|
28
|
-
wordmark: dmpatternsWordmark
|
|
33
|
+
wordmark: dmpatternsWordmark,
|
|
34
|
+
favicon: dmpatternsFavicon
|
|
29
35
|
}
|
|
30
36
|
};
|
|
31
37
|
const Logo = ({
|
|
@@ -37,12 +43,14 @@ const Logo = ({
|
|
|
37
43
|
}) => {
|
|
38
44
|
const logo = logoBrands[brand];
|
|
39
45
|
const accessibleLabel = label ?? logo.label;
|
|
46
|
+
const artwork = mode === "favicon" ? logo.favicon : logo.symbol;
|
|
40
47
|
const classes = classnames(
|
|
41
48
|
"logo",
|
|
42
49
|
`logo--${brand}`,
|
|
43
50
|
className,
|
|
44
51
|
{
|
|
45
|
-
"logo--symbol": mode === "symbol"
|
|
52
|
+
"logo--symbol": mode === "symbol",
|
|
53
|
+
"logo--favicon": mode === "favicon"
|
|
46
54
|
}
|
|
47
55
|
);
|
|
48
56
|
return /* @__PURE__ */ jsxs(
|
|
@@ -56,7 +64,7 @@ const Logo = ({
|
|
|
56
64
|
"img",
|
|
57
65
|
{
|
|
58
66
|
className: "logo__symbol",
|
|
59
|
-
src:
|
|
67
|
+
src: artwork,
|
|
60
68
|
alt: "",
|
|
61
69
|
"aria-hidden": "true"
|
|
62
70
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/logo/logo.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/logo/logo.tsx"],"names":[],"mappings":";;;;;;;;;;AA6BA,MAAM,UAAA,GAGF;AAAA,EACF,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,0JAAA;AAAA,IACP,MAAA,EAAQ,gBAAA;AAAA,IACR,QAAA,EAAU,kBAAA;AAAA,IACV,OAAA,EAAS;AAAA,GACX;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,KAAA,EAAO,cAAA;AAAA,IACP,MAAA,EAAQ,kBAAA;AAAA,IACR,QAAA,EAAU,oBAAA;AAAA,IACV,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,MAAA,EAAQ,gBAAA;AAAA,IACR,QAAA,EAAU,kBAAA;AAAA,IACV,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,MAAA,EAAQ,gBAAA;AAAA,IACR,QAAA,EAAU,kBAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb,CAAA;AASA,MAAM,OAA4B,CAAC;AAAA,EACjC,KAAA,GAAQ,YAAA;AAAA,EACR,IAAA,GAAO,MAAA;AAAA,EACP,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,IAAA,GAAO,WAAW,KAAK,CAAA;AAC7B,EAAA,MAAM,eAAA,GAAkB,SAAS,IAAA,CAAK,KAAA;AACtC,EAAA,MAAM,OAAA,GACJ,IAAA,KAAS,SAAA,GACL,IAAA,CAAK,UACL,IAAA,CAAK,MAAA;AAEX,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,MAAA;AAAA,IACA,SAAS,KAAK,CAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA;AAAA,MACE,gBAAgB,IAAA,KAAS,QAAA;AAAA,MACzB,iBAAiB,IAAA,KAAS;AAAA;AAC5B,GACF;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,YAAA,EAAY,eAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,cAAA;AAAA,YACV,GAAA,EAAK,OAAA;AAAA,YACL,GAAA,EAAI,EAAA;AAAA,YACJ,aAAA,EAAY;AAAA;AAAA,SACd;AAAA,QAEC,IAAA,KAAS,MAAA,KACP,KAAA,KAAU,cAAA,mBACT,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qCAAA;AAAA,YACV,aAAA,EAAY,MAAA;AAAA,YACZ,KAAA,EAAO;AAAA,cACL,eAAA,EAAiB,CAAA,KAAA,EAAQ,IAAA,CAAK,QAAQ,CAAA,EAAA,CAAA;AAAA,cACtC,SAAA,EAAW,CAAA,KAAA,EAAQ,IAAA,CAAK,QAAQ,CAAA,EAAA;AAAA;AAClC;AAAA,SACF,mBAEA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,gBAAA;AAAA,YACV,KAAK,IAAA,CAAK,QAAA;AAAA,YACV,GAAA,EAAI,EAAA;AAAA,YACJ,aAAA,EAAY;AAAA;AAAA,SACd;AAAA;AAAA;AAAA,GAEN;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"logo.js","sourcesContent":["import React from 'react';\nimport './logo.css';\nimport { classnames } from '../helpers/classnames';\n\nimport brandcopilotFavicon from './assets/brandcopilot-favicon.svg';\nimport brandcopilotSymbol from './assets/brandcopilot-symbol.svg';\nimport brandcopilotWordmark from './assets/brandcopilot-wordmark.svg';\nimport dmpatternsFavicon from './assets/dmpatterns-favicon.svg';\nimport dmpatternsSymbol from './assets/dmpatterns-symbol.svg';\nimport dmpatternsWordmark from './assets/dmpatterns-wordmark.svg';\n\nexport type LogoBrand =\n | 'dmpatterns'\n | 'brandcopilot'\n | 'pdigest'\n | 'retrack';\n\nexport type LogoMode =\n | 'full'\n | 'symbol'\n | 'favicon';\n\ninterface LogoBrandDefinition {\n label: string;\n symbol: string;\n wordmark: string;\n favicon: string;\n}\n\nconst logoBrands: Record<\n LogoBrand,\n LogoBrandDefinition\n> = {\n dmpatterns: {\n label: 'Паттерны дизайн-менеджмента',\n symbol: dmpatternsSymbol,\n wordmark: dmpatternsWordmark,\n favicon: dmpatternsFavicon,\n },\n brandcopilot: {\n label: 'Brandcopilot',\n symbol: brandcopilotSymbol,\n wordmark: brandcopilotWordmark,\n favicon: brandcopilotFavicon,\n },\n pdigest: {\n label: 'PDigest',\n symbol: dmpatternsSymbol,\n wordmark: dmpatternsWordmark,\n favicon: dmpatternsFavicon,\n },\n retrack: {\n label: 'Retrack',\n symbol: dmpatternsSymbol,\n wordmark: dmpatternsWordmark,\n favicon: dmpatternsFavicon,\n },\n};\n\nexport interface LogoProps\n extends React.HTMLAttributes<HTMLDivElement> {\n brand?: LogoBrand;\n mode?: LogoMode;\n label?: string;\n}\n\nconst Logo: React.FC<LogoProps> = ({\n brand = 'dmpatterns',\n mode = 'full',\n label,\n className = '',\n ...props\n}) => {\n const logo = logoBrands[brand];\n const accessibleLabel = label ?? logo.label;\n const artwork =\n mode === 'favicon'\n ? logo.favicon\n : logo.symbol;\n\n const classes = classnames(\n 'logo',\n `logo--${brand}`,\n className,\n {\n 'logo--symbol': mode === 'symbol',\n 'logo--favicon': mode === 'favicon',\n },\n );\n\n return (\n <div\n className={classes}\n aria-label={accessibleLabel}\n {...props}\n >\n <img\n className=\"logo__symbol\"\n src={artwork}\n alt=\"\"\n aria-hidden=\"true\"\n />\n\n {mode === 'full' &&\n (brand === 'brandcopilot' ? (\n <span\n className=\"logo__wordmark logo__wordmark--mask\"\n aria-hidden=\"true\"\n style={{\n WebkitMaskImage: `url(\"${logo.wordmark}\")`,\n maskImage: `url(\"${logo.wordmark}\")`,\n }}\n />\n ) : (\n <img\n className=\"logo__wordmark\"\n src={logo.wordmark}\n alt=\"\"\n aria-hidden=\"true\"\n />\n ))}\n </div>\n );\n};\n\nexport default Logo;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/surface/surface-presentation.ts"],"names":[],"mappings":";;;;AAQO,SAAS,oBACd,IAAA,EACyB;AACzB,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,IAAA;AAAA,IACT,sBACE,IAAA,KAAS,WAAA;AAAA,IACX,qBACE,IAAA,KAAS,UAAA;AAAA,IACX,oBACE,IAAA,KAAS;AAAA,GACb;AACF","file":"surface-presentation.cjs","sourcesContent":["import './surface.css';\n\nexport type SurfaceRank =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'outline';\n\nexport function surfacePresentation(\n rank: SurfaceRank,\n): Record<string, boolean> {\n return {\n surface: true,\n 'surface--secondary':\n rank === 'secondary',\n 'surface--tertiary':\n rank === 'tertiary',\n 'surface--outline':\n rank === 'outline',\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/surface/surface-presentation.ts"],"names":[],"mappings":";;;;AAQO,SAAS,oBACd,IAAA,EACyB;AACzB,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,IAAA;AAAA,IACT,oBACE,IAAA,KAAS,SAAA;AAAA,IACX,sBACE,IAAA,KAAS,WAAA;AAAA,IACX,qBACE,IAAA,KAAS,UAAA;AAAA,IACX,oBACE,IAAA,KAAS;AAAA,GACb;AACF","file":"surface-presentation.cjs","sourcesContent":["import './surface.css';\n\nexport type SurfaceRank =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'outline';\n\nexport function surfacePresentation(\n rank: SurfaceRank,\n): Record<string, boolean> {\n return {\n surface: true,\n 'surface--primary':\n rank === 'primary',\n 'surface--secondary':\n rank === 'secondary',\n 'surface--tertiary':\n rank === 'tertiary',\n 'surface--outline':\n rank === 'outline',\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/surface/surface-presentation.ts"],"names":[],"mappings":";;AAQO,SAAS,oBACd,IAAA,EACyB;AACzB,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,IAAA;AAAA,IACT,sBACE,IAAA,KAAS,WAAA;AAAA,IACX,qBACE,IAAA,KAAS,UAAA;AAAA,IACX,oBACE,IAAA,KAAS;AAAA,GACb;AACF","file":"surface-presentation.js","sourcesContent":["import './surface.css';\n\nexport type SurfaceRank =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'outline';\n\nexport function surfacePresentation(\n rank: SurfaceRank,\n): Record<string, boolean> {\n return {\n surface: true,\n 'surface--secondary':\n rank === 'secondary',\n 'surface--tertiary':\n rank === 'tertiary',\n 'surface--outline':\n rank === 'outline',\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/surface/surface-presentation.ts"],"names":[],"mappings":";;AAQO,SAAS,oBACd,IAAA,EACyB;AACzB,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,IAAA;AAAA,IACT,oBACE,IAAA,KAAS,SAAA;AAAA,IACX,sBACE,IAAA,KAAS,WAAA;AAAA,IACX,qBACE,IAAA,KAAS,UAAA;AAAA,IACX,oBACE,IAAA,KAAS;AAAA,GACb;AACF","file":"surface-presentation.js","sourcesContent":["import './surface.css';\n\nexport type SurfaceRank =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'outline';\n\nexport function surfacePresentation(\n rank: SurfaceRank,\n): Record<string, boolean> {\n return {\n surface: true,\n 'surface--primary':\n rank === 'primary',\n 'surface--secondary':\n rank === 'secondary',\n 'surface--tertiary':\n rank === 'tertiary',\n 'surface--outline':\n rank === 'outline',\n };\n}\n"]}
|
|
@@ -23,6 +23,21 @@
|
|
|
23
23
|
/* motion */
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
.surface--primary .form-message__item--success {
|
|
27
|
+
/* color */
|
|
28
|
+
--form-message-item-color: var(--surface-color);
|
|
29
|
+
|
|
30
|
+
/* typography */
|
|
31
|
+
|
|
32
|
+
/* size */
|
|
33
|
+
|
|
34
|
+
/* border */
|
|
35
|
+
|
|
36
|
+
/* depth */
|
|
37
|
+
|
|
38
|
+
/* motion */
|
|
39
|
+
}
|
|
40
|
+
|
|
26
41
|
.surface--secondary {
|
|
27
42
|
/* color */
|
|
28
43
|
--surface-bg: var(--color-bg-container-secondary);
|
|
@@ -121,6 +136,24 @@
|
|
|
121
136
|
/* motion */
|
|
122
137
|
}
|
|
123
138
|
|
|
139
|
+
.surface--secondary .progressbar {
|
|
140
|
+
/* color */
|
|
141
|
+
--progressbar-track-bg: color-mix(in srgb, var(--color-primary-1) 30%, transparent);
|
|
142
|
+
--progressbar-buffered-bg: color-mix(in srgb, var(--color-primary-1) 40%, transparent);
|
|
143
|
+
--progressbar-value-bg: var(--color-primary-1);
|
|
144
|
+
--progressbar-label-color: var(--color-text-primary-1);
|
|
145
|
+
|
|
146
|
+
/* typography */
|
|
147
|
+
|
|
148
|
+
/* size */
|
|
149
|
+
|
|
150
|
+
/* border */
|
|
151
|
+
|
|
152
|
+
/* depth */
|
|
153
|
+
|
|
154
|
+
/* motion */
|
|
155
|
+
}
|
|
156
|
+
|
|
124
157
|
.surface--outline {
|
|
125
158
|
/* color */
|
|
126
159
|
background: transparent;
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -3690,50 +3690,121 @@
|
|
|
3690
3690
|
/* motion */
|
|
3691
3691
|
}
|
|
3692
3692
|
|
|
3693
|
-
.logo--symbol
|
|
3693
|
+
.logo--symbol,
|
|
3694
|
+
.logo--favicon {
|
|
3695
|
+
/* color */
|
|
3696
|
+
|
|
3697
|
+
/* typography */
|
|
3698
|
+
|
|
3694
3699
|
/* size */
|
|
3695
3700
|
gap: 0;
|
|
3701
|
+
|
|
3702
|
+
/* border */
|
|
3703
|
+
|
|
3704
|
+
/* depth */
|
|
3705
|
+
|
|
3706
|
+
/* motion */
|
|
3696
3707
|
}
|
|
3697
3708
|
|
|
3698
3709
|
.logo--brandcopilot {
|
|
3710
|
+
/* color */
|
|
3711
|
+
|
|
3712
|
+
/* typography */
|
|
3713
|
+
|
|
3699
3714
|
/* size */
|
|
3700
3715
|
--logo-brandcopilot-height: 45px;
|
|
3701
3716
|
--logo-brandcopilot-wordmark-width: 79px;
|
|
3702
3717
|
|
|
3703
3718
|
align-items: center;
|
|
3719
|
+
|
|
3720
|
+
/* border */
|
|
3721
|
+
|
|
3722
|
+
/* depth */
|
|
3723
|
+
|
|
3724
|
+
/* motion */
|
|
3704
3725
|
}
|
|
3705
3726
|
|
|
3706
3727
|
:where(a, button) .logo {
|
|
3728
|
+
/* color */
|
|
3729
|
+
|
|
3730
|
+
/* typography */
|
|
3731
|
+
|
|
3732
|
+
/* size */
|
|
3733
|
+
|
|
3734
|
+
/* border */
|
|
3735
|
+
|
|
3736
|
+
/* depth */
|
|
3737
|
+
|
|
3707
3738
|
/* motion */
|
|
3708
3739
|
cursor: pointer;
|
|
3709
3740
|
}
|
|
3710
3741
|
|
|
3711
3742
|
.logo__symbol {
|
|
3743
|
+
/* color */
|
|
3744
|
+
|
|
3745
|
+
/* typography */
|
|
3746
|
+
|
|
3712
3747
|
/* size */
|
|
3713
3748
|
display: block;
|
|
3714
3749
|
width: var(--logo-symbol-size);
|
|
3715
3750
|
height: var(--logo-symbol-size);
|
|
3716
3751
|
flex-shrink: 0;
|
|
3752
|
+
|
|
3753
|
+
/* border */
|
|
3754
|
+
|
|
3755
|
+
/* depth */
|
|
3756
|
+
|
|
3757
|
+
/* motion */
|
|
3717
3758
|
}
|
|
3718
3759
|
|
|
3719
3760
|
.logo__wordmark {
|
|
3761
|
+
/* color */
|
|
3762
|
+
|
|
3763
|
+
/* typography */
|
|
3764
|
+
|
|
3720
3765
|
/* size */
|
|
3721
3766
|
display: block;
|
|
3722
3767
|
width: var(--logo-wordmark-width);
|
|
3723
3768
|
height: auto;
|
|
3724
3769
|
flex-shrink: 0;
|
|
3770
|
+
|
|
3771
|
+
/* border */
|
|
3772
|
+
|
|
3773
|
+
/* depth */
|
|
3774
|
+
|
|
3775
|
+
/* motion */
|
|
3725
3776
|
}
|
|
3726
3777
|
|
|
3727
3778
|
.logo--brandcopilot .logo__symbol {
|
|
3779
|
+
/* color */
|
|
3780
|
+
|
|
3781
|
+
/* typography */
|
|
3782
|
+
|
|
3728
3783
|
/* size */
|
|
3729
3784
|
width: auto;
|
|
3730
3785
|
height: var(--logo-brandcopilot-height);
|
|
3786
|
+
|
|
3787
|
+
/* border */
|
|
3788
|
+
|
|
3789
|
+
/* depth */
|
|
3790
|
+
|
|
3791
|
+
/* motion */
|
|
3731
3792
|
}
|
|
3732
3793
|
|
|
3733
3794
|
.logo--brandcopilot .logo__wordmark {
|
|
3795
|
+
/* color */
|
|
3796
|
+
|
|
3797
|
+
/* typography */
|
|
3798
|
+
|
|
3734
3799
|
/* size */
|
|
3735
3800
|
width: var(--logo-brandcopilot-wordmark-width);
|
|
3736
3801
|
height: var(--logo-brandcopilot-height);
|
|
3802
|
+
|
|
3803
|
+
/* border */
|
|
3804
|
+
|
|
3805
|
+
/* depth */
|
|
3806
|
+
|
|
3807
|
+
/* motion */
|
|
3737
3808
|
}
|
|
3738
3809
|
|
|
3739
3810
|
.logo__wordmark--mask {
|
|
@@ -4697,6 +4768,21 @@
|
|
|
4697
4768
|
/* motion */
|
|
4698
4769
|
}
|
|
4699
4770
|
|
|
4771
|
+
.surface--primary .form-message__item--success {
|
|
4772
|
+
/* color */
|
|
4773
|
+
--form-message-item-color: var(--surface-color);
|
|
4774
|
+
|
|
4775
|
+
/* typography */
|
|
4776
|
+
|
|
4777
|
+
/* size */
|
|
4778
|
+
|
|
4779
|
+
/* border */
|
|
4780
|
+
|
|
4781
|
+
/* depth */
|
|
4782
|
+
|
|
4783
|
+
/* motion */
|
|
4784
|
+
}
|
|
4785
|
+
|
|
4700
4786
|
.surface--secondary {
|
|
4701
4787
|
/* color */
|
|
4702
4788
|
--surface-bg: var(--color-bg-container-secondary);
|
|
@@ -4795,6 +4881,24 @@
|
|
|
4795
4881
|
/* motion */
|
|
4796
4882
|
}
|
|
4797
4883
|
|
|
4884
|
+
.surface--secondary .progressbar {
|
|
4885
|
+
/* color */
|
|
4886
|
+
--progressbar-track-bg: color-mix(in srgb, var(--color-primary-1) 30%, transparent);
|
|
4887
|
+
--progressbar-buffered-bg: color-mix(in srgb, var(--color-primary-1) 40%, transparent);
|
|
4888
|
+
--progressbar-value-bg: var(--color-primary-1);
|
|
4889
|
+
--progressbar-label-color: var(--color-text-primary-1);
|
|
4890
|
+
|
|
4891
|
+
/* typography */
|
|
4892
|
+
|
|
4893
|
+
/* size */
|
|
4894
|
+
|
|
4895
|
+
/* border */
|
|
4896
|
+
|
|
4897
|
+
/* depth */
|
|
4898
|
+
|
|
4899
|
+
/* motion */
|
|
4900
|
+
}
|
|
4901
|
+
|
|
4798
4902
|
.surface--outline {
|
|
4799
4903
|
/* color */
|
|
4800
4904
|
background: transparent;
|