UNPKG

@vimeo/iris

Version:

Vimeo Design System

github.com/vimeo/iris/tree/main

vimeo/iris

121 lines (118 loc) • 14.4 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js'; import styled, { css } from 'styled-components'; import { rem, rgba, darken } from 'polished'; import { white, blue, slate, grayscale, green, red } from '../../color/colors.esm.js'; import { core } from '../../tokens/core.esm.js'; import '../../tokens/color/index.esm.js'; import '../../tokens/color/background/background.esm.js'; import '../../tokens/util/readToken.esm.js'; import '../../tokens/util/clamp.esm.js'; import '../../tokens/color/format/format.esm.js'; import '../../tokens/color/format/primary.esm.js'; import '../../tokens/color/format/secondary.esm.js'; import '../../tokens/color/format/tertiary.esm.js'; import '../../tokens/color/rainbow/rainbow.esm.js'; import '../../tokens/color/rainbow/conic/index.esm.js'; import '../../tokens/color/rainbow/conic/sm.esm.js'; import '../../tokens/color/rainbow/conic/xl.esm.js'; import '../../tokens/color/rainbow/linear/index.esm.js'; import '../../tokens/color/rainbow/linear/sm.esm.js'; import '../../tokens/color/rainbow/linear/xl.esm.js'; import '../../tokens/color/livestream/livestream.esm.js'; import '../../tokens/color/status/status.esm.js'; import '../../tokens/color/status/caution.esm.js'; import '../../tokens/color/status/negative.esm.js'; import '../../tokens/color/status/positive.esm.js'; import '../../tokens/color/stroke/stroke.esm.js'; import '../../tokens/color/surface/surface.esm.js'; import '../../tokens/color/text/text.esm.js'; import '../../tokens/util/round.esm.js'; import '../../tokens/color/upsell/upsell.esm.js'; import '../../tokens/color/upsell/sm.esm.js'; import '../../tokens/color/upsell/xl.esm.js'; import '../../tokens/color/upsell/new.esm.js'; import '../../tokens/edge/edge.esm.js'; import '../../tokens/space/space.esm.js'; import '../../tokens/typography/index.esm.js'; import '../../tokens/typography/size/size.esm.js'; var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"]))); var Badge = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n outline: none;\n border-radius: ", ";\n letter-spacing: 0.02rem;\n color: inherit;\n text-shadow: none;\n text-align: center;\n text-transform: uppercase;\n text-decoration: none;\n white-space: nowrap;\n transition: 90ms ease-in-out;\n\n ", ";\n ", ";\n\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n"], ["\n display: block;\n outline: none;\n border-radius: ", ";\n letter-spacing: 0.02rem;\n color: inherit;\n text-shadow: none;\n text-align: center;\n text-transform: uppercase;\n text-decoration: none;\n white-space: nowrap;\n transition: 90ms ease-in-out;\n\n ", ";\n ", ";\n\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n"])), rem(2), format, size); function size(_a) { var size = _a.size; switch (size) { case 'sm': return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0.1875rem 0.25rem;\n font-size: 0.5625rem;\n font-weight: 500;\n line-height: 1.2;\n "], ["\n padding: 0.1875rem 0.25rem;\n font-size: 0.5625rem;\n font-weight: 500;\n line-height: 1.2;\n "]))); case 'lg': return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0.3125rem;\n font-size: 1rem;\n font-weight: 500;\n line-height: 0.8;\n "], ["\n padding: 0.3125rem;\n font-size: 1rem;\n font-weight: 500;\n line-height: 0.8;\n "]))); case 'xl': return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-width: 2px;\n border-radius: 0.25rem;\n padding: 0.5rem 0.75rem;\n font-weight: 600;\n line-height: 0.8;\n font-size: 1.125rem;\n "], ["\n border-width: 2px;\n border-radius: 0.25rem;\n padding: 0.5rem 0.75rem;\n font-weight: 600;\n line-height: 0.8;\n font-size: 1.125rem;\n "]))); } } function format(_a) { var $format = _a.$format, _b = _a.href, href = _b === void 0 ? null : _b; switch ($format) { case 'alum': return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: #503873;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "], ["\n color: #503873;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n "])), rgba('#503873', 0.25), rgba('#503873', 0.3)); case 'beta': return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: #ff8a00;\n "], ["\n color: #ff8a00;\n "]))); case 'business': return basicBadge(green(500)); case 'curation': return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), rgba('#FFB21E', 0.15), darken(0.1, '#FF8A00'), rgba('#FFB21E', 0.25)); case 'staff': return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), rgba('#FFB21E', 0.15), darken(0.1, '#FF8A00'), rgba('#FFB21E', 0.25)); case 'support': return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n color: #ff8a00;\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), rgba('#FFB21E', 0.15), darken(0.1, '#FF8A00'), rgba('#FFB21E', 0.25)); case 'explicit': return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: ", ";\n border: 1px solid ", ";\n background-color: transparent;\n\n ", "\n "], ["\n color: ", ";\n border: 1px solid ", ";\n background-color: transparent;\n\n ", "\n "])), red(600), red(600), href && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n &:focus,\n &:active,\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n &:focus,\n &:active,\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), red(600), red(50))); case 'featured': return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n color: #ff9d9d;\n "], ["\n color: #ff9d9d;\n "]))); case 'hd': return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font-style: italic;\n color: #cceffc;\n "], ["\n font-style: italic;\n color: #cceffc;\n "]))); case 'help': return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n cursor: help;\n\n &:hover,\n &:focus {\n color: ", ";\n background-color: #3a5161;\n }\n "], ["\n cursor: help;\n\n &:hover,\n &:focus {\n color: ", ";\n background-color: #3a5161;\n }\n "])), white); case 'info': return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n color: #d0d8db;\n cursor: help;\n\n &:hover,\n &:focus {\n color: ", " !important;\n background: ", ";\n }\n "], ["\n color: #d0d8db;\n cursor: help;\n\n &:hover,\n &:focus {\n color: ", " !important;\n background: ", ";\n }\n "])), white, slate(500)); case 'live': return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n color: ", ";\n background: #ff4d4d;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "], ["\n color: ", ";\n background: #ff4d4d;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "])), white, white, red(600)); case 'live-archive': return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n color: #8699a6;\n border: 1px solid #8699a6;\n\n &:hover {\n color: ", ";\n border-color: ", ";\n }\n "], ["\n color: #8699a6;\n border: 1px solid #8699a6;\n\n &:hover {\n color: ", ";\n border-color: ", ";\n }\n "])), slate(800), slate(800)); case 'mature': { var color = core.color.status.negative; return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n color: ", ";\n border: 1px solid ", ";\n "], ["\n color: ", ";\n border: 1px solid ", ";\n "])), color, color); } case 'new': return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n color: ", ";\n vertical-align: top;\n "], ["\n color: ", ";\n vertical-align: top;\n "])), red(500)); case 'not-yet-rated': { var color = core.color.text(900); return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n border: 1px solid ", ";\n "], ["\n color: ", ";\n border: 1px solid ", ";\n "])), color, color); } case 'restricted': { return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n opacity: 0.7;\n "], ["\n color: ", ";\n background-color: ", ";\n opacity: 0.7;\n "])), white, red(500)); } case 'sponsor': return basicBadge(green(500)); case 'partner': return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", ";\n color: #a2afb8;\n background-color: ", ";\n "], ["\n ", ";\n color: #a2afb8;\n background-color: ", ";\n "])), basicBadge(slate(800)), slate(100)); case 'pro': return basicBadge(slate(800)); case 'plus': return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", ";\n border: none;\n "], ["\n ", ";\n border: none;\n "])), basicBadge(blue(500))); case 'producer': return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", ";\n border: none;\n "], ["\n ", ";\n border: none;\n "])), basicBadge('#503873')); case 'spatial': return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n color: ", ";\n border: 1px solid #d0d8db;\n background-color: transparent;\n\n &:focus,\n &:active,\n &:hover {\n background-color: ", ";\n }\n "], ["\n color: ", ";\n border: 1px solid #d0d8db;\n background-color: transparent;\n\n &:focus,\n &:active,\n &:hover {\n background-color: ", ";\n }\n "])), slate(500), grayscale(100)); case 'upgrade': return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n color: ", ";\n background-color: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), white, blue(500), white, blue(600)); case 'vod': return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n color: rgba(247, 180, 44, 0.2);\n background: transparent;\n border: 1px dotted rgba(247, 180, 44, 0.5);\n "], ["\n color: rgba(247, 180, 44, 0.2);\n background: transparent;\n border: 1px dotted rgba(247, 180, 44, 0.5);\n "]))); default: return ''; } } function basicBadge(color, hover) { if (hover === void 0) { hover = true; } return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n\n ", ";\n "], ["\n color: ", ";\n background-color: ", ";\n\n ", ";\n "])), color, rgba(color, 0.15), hover && css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "], ["\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), darken(0.1, color), rgba(color, 0.2))); } var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30; export { Badge, Wrapper, format, size };