webcake-ui-kit 1.0.1 → 1.0.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.
- package/package.json +2 -1
- package/src/components/rich-switch-group/RichSwitchGroup.vue +4 -4
- package/src/components/switch-group/SwitchGroup.vue +3 -3
- package/src/components/tabs/tabs.css +2 -2
- package/src/components/typography/Typography.vue +104 -0
- package/src/components/typography/typography.css +4 -0
- package/src/index.js +8 -7
- package/src/styles/alpha_colors.css +35 -37
- package/src/styles/border_radius.css +21 -23
- package/src/styles/brand_colors.css +37 -39
- package/src/styles/chart_colors.css +27 -29
- package/src/styles/color_general.css +206 -208
- package/src/styles/raw_colors.css +267 -269
- package/src/styles/shadow.css +10 -12
- package/src/styles/spacing.css +31 -33
- package/src/styles/typography.css +190 -90
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "webcake-ui-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "UI Kit for Vue 2 && 3 - Pure Options API",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"./WkTag": "./src/components/tag/Tag.vue",
|
|
45
45
|
"./WkToggle": "./src/components/toggle/Toggle.vue",
|
|
46
46
|
"./WkToggleGroup": "./src/components/toggle-group/ToggleGroup.vue",
|
|
47
|
+
"./WkTypography": "./src/components/typography/Typography.vue",
|
|
47
48
|
"./components/*": "./src/components/*",
|
|
48
49
|
"./package.json": "./package.json"
|
|
49
50
|
},
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
}"
|
|
8
8
|
>
|
|
9
9
|
<div v-if="!flipped" class="ui-rich-switch-group__aligner">
|
|
10
|
-
<
|
|
10
|
+
<WkSwitch :value="value" :disabled="disabled" @change="$emit('change', $event)" @input="$emit('input', $event)" />
|
|
11
11
|
</div>
|
|
12
12
|
<div class="ui-rich-switch-group__content">
|
|
13
13
|
<span class="ui-rich-switch-group__label"
|
|
@@ -18,17 +18,17 @@
|
|
|
18
18
|
</span>
|
|
19
19
|
</div>
|
|
20
20
|
<div v-if="flipped" class="ui-rich-switch-group__aligner">
|
|
21
|
-
<
|
|
21
|
+
<WkSwitch :value="value" :disabled="disabled" @change="$emit('change', $event)" @input="$emit('input', $event)" />
|
|
22
22
|
</div>
|
|
23
23
|
</div>
|
|
24
24
|
</template>
|
|
25
25
|
|
|
26
26
|
<script>
|
|
27
|
-
import
|
|
27
|
+
import WkSwitch from '../switch/Switch.vue'
|
|
28
28
|
|
|
29
29
|
export default {
|
|
30
30
|
name: 'RichSwitchGroup',
|
|
31
|
-
components: {
|
|
31
|
+
components: { WkSwitch },
|
|
32
32
|
props: {
|
|
33
33
|
value: { type: Boolean, default: false },
|
|
34
34
|
disabled: { type: Boolean, default: false },
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="ui-switch-group" :class="[`ui-switch-group--${layout}`, { 'ui-switch-group--disabled': disabled }]">
|
|
3
|
-
<
|
|
3
|
+
<WkSwitch :value="value" :disabled="disabled" @change="$emit('change', $event)" @input="$emit('input', $event)" />
|
|
4
4
|
<span class="ui-switch-group__label"
|
|
5
5
|
><slot>{{ label }}</slot></span
|
|
6
6
|
>
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
</template>
|
|
9
9
|
|
|
10
10
|
<script>
|
|
11
|
-
import
|
|
11
|
+
import WkSwitch from '../switch/Switch.vue'
|
|
12
12
|
|
|
13
13
|
export default {
|
|
14
14
|
name: 'SwitchGroup',
|
|
15
|
-
components: {
|
|
15
|
+
components: { WkSwitch },
|
|
16
16
|
props: {
|
|
17
17
|
value: { type: Boolean, default: false },
|
|
18
18
|
disabled: { type: Boolean, default: false },
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component
|
|
3
|
+
:is="resolvedTag"
|
|
4
|
+
:class="[
|
|
5
|
+
'ui-typography',
|
|
6
|
+
`wk-${variant}`,
|
|
7
|
+
weight ? `wk-weight-${weight}` : null,
|
|
8
|
+
align !== 'inherit' ? `wk-text-${align}` : null
|
|
9
|
+
]"
|
|
10
|
+
:style="rootStyle"
|
|
11
|
+
>
|
|
12
|
+
<slot>{{ text }}</slot>
|
|
13
|
+
</component>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
const VARIANTS = [
|
|
18
|
+
'heading-1',
|
|
19
|
+
'heading-2',
|
|
20
|
+
'heading-3',
|
|
21
|
+
'heading-4',
|
|
22
|
+
'paragraph-large',
|
|
23
|
+
'paragraph-regular',
|
|
24
|
+
'paragraph-small',
|
|
25
|
+
'paragraph-mini',
|
|
26
|
+
'caption',
|
|
27
|
+
'caption-mini',
|
|
28
|
+
'monospaced'
|
|
29
|
+
]
|
|
30
|
+
|
|
31
|
+
const DEFAULT_TAGS = {
|
|
32
|
+
'heading-1': 'h1',
|
|
33
|
+
'heading-2': 'h2',
|
|
34
|
+
'heading-3': 'h3',
|
|
35
|
+
'heading-4': 'h4',
|
|
36
|
+
'paragraph-large': 'p',
|
|
37
|
+
'paragraph-regular': 'p',
|
|
38
|
+
'paragraph-small': 'p',
|
|
39
|
+
'paragraph-mini': 'p',
|
|
40
|
+
caption: 'span',
|
|
41
|
+
'caption-mini': 'span',
|
|
42
|
+
monospaced: 'span'
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const COLORS = [
|
|
46
|
+
'',
|
|
47
|
+
'primary-fg',
|
|
48
|
+
'secondary-fg',
|
|
49
|
+
'muted-fg',
|
|
50
|
+
'accent-fg',
|
|
51
|
+
'inverse-fg',
|
|
52
|
+
'destructive',
|
|
53
|
+
'destructive-text'
|
|
54
|
+
]
|
|
55
|
+
|
|
56
|
+
const WEIGHTS = ['', 'regular', 'medium', 'bold']
|
|
57
|
+
const ALIGNS = ['inherit', 'left', 'center', 'right']
|
|
58
|
+
|
|
59
|
+
export default {
|
|
60
|
+
name: 'Typography',
|
|
61
|
+
props: {
|
|
62
|
+
variant: {
|
|
63
|
+
type: String,
|
|
64
|
+
default: 'paragraph-regular',
|
|
65
|
+
validator: v => VARIANTS.indexOf(v) !== -1
|
|
66
|
+
},
|
|
67
|
+
as: {
|
|
68
|
+
type: String,
|
|
69
|
+
default: ''
|
|
70
|
+
},
|
|
71
|
+
weight: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: '',
|
|
74
|
+
validator: v => WEIGHTS.indexOf(v) !== -1
|
|
75
|
+
},
|
|
76
|
+
color: {
|
|
77
|
+
type: String,
|
|
78
|
+
default: '',
|
|
79
|
+
validator: v => COLORS.indexOf(v) !== -1
|
|
80
|
+
},
|
|
81
|
+
align: {
|
|
82
|
+
type: String,
|
|
83
|
+
default: 'inherit',
|
|
84
|
+
validator: v => ALIGNS.indexOf(v) !== -1
|
|
85
|
+
},
|
|
86
|
+
text: {
|
|
87
|
+
type: String,
|
|
88
|
+
default: ''
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
emits: [],
|
|
92
|
+
computed: {
|
|
93
|
+
resolvedTag() {
|
|
94
|
+
return this.as || DEFAULT_TAGS[this.variant] || 'span'
|
|
95
|
+
},
|
|
96
|
+
rootStyle() {
|
|
97
|
+
if (!this.color) return null
|
|
98
|
+
return { '--ui-typography-color': 'var(--' + this.color + ')' }
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
</script>
|
|
103
|
+
|
|
104
|
+
<style src="./typography.css" scoped></style>
|
package/src/index.js
CHANGED
|
@@ -8,22 +8,23 @@ export { default as WkButtonGroup } from './components/button-group/ButtonGroup.
|
|
|
8
8
|
export { default as WkCheckbox } from './components/checkbox/Checkbox.vue'
|
|
9
9
|
export { default as WkCheckboxGroup } from './components/checkbox-group/CheckboxGroup.vue'
|
|
10
10
|
export { default as WkDialog } from './components/dialog/Dialog.vue'
|
|
11
|
+
export { default as WkDivider } from './components/divider/Divider.vue'
|
|
11
12
|
export { default as WkInput } from './components/input/Input.vue'
|
|
12
13
|
export { default as WkPagination } from './components/pagination/Pagination.vue'
|
|
13
|
-
export { default as WkRichCheckboxGroup } from './components/rich-checkbox-group/RichCheckboxGroup.vue'
|
|
14
|
-
export { default as WkToggle } from './components/toggle/Toggle.vue'
|
|
15
|
-
export { default as WkToggleGroup } from './components/toggle-group/ToggleGroup.vue'
|
|
16
|
-
export { default as WkSelect } from './components/select/Select.vue'
|
|
17
|
-
export { default as WkSelectOption } from './components/select-option/SelectOption.vue'
|
|
18
|
-
export { default as WkDivider } from './components/divider/Divider.vue'
|
|
19
14
|
export { default as WkRadio } from './components/radio/Radio.vue'
|
|
20
15
|
export { default as WkRadioGroup } from './components/radio-group/RadioGroup.vue'
|
|
16
|
+
export { default as WkRichCheckboxGroup } from './components/rich-checkbox-group/RichCheckboxGroup.vue'
|
|
21
17
|
export { default as WkRichSwitchGroup } from './components/rich-switch-group/RichSwitchGroup.vue'
|
|
18
|
+
export { default as WkSelect } from './components/select/Select.vue'
|
|
19
|
+
export { default as WkSelectOption } from './components/select-option/SelectOption.vue'
|
|
20
|
+
export { default as WkSidebarGroupLabel } from './components/sidebar-group-label/SidebarGroupLabel.vue'
|
|
22
21
|
export { default as WkSidebarItem } from './components/sidebar-item/SidebarItem.vue'
|
|
23
22
|
export { default as WkSlider } from './components/slider/Slider.vue'
|
|
24
23
|
export { default as WkSpinner } from './components/spinner/Spinner.vue'
|
|
25
24
|
export { default as WkSwitch } from './components/switch/Switch.vue'
|
|
26
|
-
export { default as WkSidebarGroupLabel } from './components/sidebar-group-label/SidebarGroupLabel.vue'
|
|
27
25
|
export { default as WkSwitchGroup } from './components/switch-group/SwitchGroup.vue'
|
|
28
26
|
export { default as WkTabs } from './components/tabs/Tabs.vue'
|
|
29
27
|
export { default as WkTag } from './components/tag/Tag.vue'
|
|
28
|
+
export { default as WkToggle } from './components/toggle/Toggle.vue'
|
|
29
|
+
export { default as WkToggleGroup } from './components/toggle-group/ToggleGroup.vue'
|
|
30
|
+
export { default as WkTypography } from './components/typography/Typography.vue'
|
|
@@ -1,39 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
--color-white-alpha-100: rgb(255 255 255 / 100%);
|
|
1
|
+
:root {
|
|
2
|
+
/* ========================= White Alpha ========================= */
|
|
3
|
+
--color-white-alpha-0: rgb(255 255 255 / 0%);
|
|
4
|
+
--color-white-alpha-001: rgb(255 255 255 / 0.01%);
|
|
5
|
+
--color-white-alpha-333: rgb(255 255 255 / 3.33%);
|
|
6
|
+
--color-white-alpha-5: rgb(255 255 255 / 5%);
|
|
7
|
+
--color-white-alpha-10: rgb(255 255 255 / 10%);
|
|
8
|
+
--color-white-alpha-15: rgb(255 255 255 / 15%);
|
|
9
|
+
--color-white-alpha-20: rgb(255 255 255 / 20%);
|
|
10
|
+
--color-white-alpha-30: rgb(255 255 255 / 30%);
|
|
11
|
+
--color-white-alpha-40: rgb(255 255 255 / 40%);
|
|
12
|
+
--color-white-alpha-50: rgb(255 255 255 / 50%);
|
|
13
|
+
--color-white-alpha-60: rgb(255 255 255 / 60%);
|
|
14
|
+
--color-white-alpha-70: rgb(255 255 255 / 70%);
|
|
15
|
+
--color-white-alpha-80: rgb(255 255 255 / 80%);
|
|
16
|
+
--color-white-alpha-90: rgb(255 255 255 / 90%);
|
|
17
|
+
--color-white-alpha-95: rgb(255 255 255 / 95%);
|
|
18
|
+
--color-white-alpha-100: rgb(255 255 255 / 100%);
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
20
|
+
/* ========================= Black Alpha ========================= */
|
|
21
|
+
--color-black-alpha-0: rgb(0 0 0 / 0%);
|
|
22
|
+
--color-black-alpha-001: rgb(0 0 0 / 0.01%);
|
|
23
|
+
--color-black-alpha-333: rgb(0 0 0 / 3.33%);
|
|
24
|
+
--color-black-alpha-5: rgb(0 0 0 / 5%);
|
|
25
|
+
--color-black-alpha-10: rgb(0 0 0 / 10%);
|
|
26
|
+
--color-black-alpha-15: rgb(0 0 0 / 15%);
|
|
27
|
+
--color-black-alpha-20: rgb(0 0 0 / 20%);
|
|
28
|
+
--color-black-alpha-30: rgb(0 0 0 / 30%);
|
|
29
|
+
--color-black-alpha-40: rgb(0 0 0 / 40%);
|
|
30
|
+
--color-black-alpha-50: rgb(0 0 0 / 50%);
|
|
31
|
+
--color-black-alpha-60: rgb(0 0 0 / 60%);
|
|
32
|
+
--color-black-alpha-70: rgb(0 0 0 / 70%);
|
|
33
|
+
--color-black-alpha-80: rgb(0 0 0 / 80%);
|
|
34
|
+
--color-black-alpha-90: rgb(0 0 0 / 90%);
|
|
35
|
+
--color-black-alpha-95: rgb(0 0 0 / 95%);
|
|
36
|
+
--color-black-alpha-100: rgb(0 0 0 / 100%);
|
|
39
37
|
}
|
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
--radius-infinite: 9999px;
|
|
1
|
+
:root {
|
|
2
|
+
--radius-0: 0px;
|
|
3
|
+
--radius-2: 2px;
|
|
4
|
+
--radius-4: 4px;
|
|
5
|
+
--radius-6: 6px;
|
|
6
|
+
--radius-8: 8px;
|
|
7
|
+
--radius-10: 10px;
|
|
8
|
+
--radius-12: 12px;
|
|
9
|
+
--radius-16: 16px;
|
|
10
|
+
--radius-24: 24px;
|
|
11
|
+
--radius-infinite: 9999px;
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
13
|
+
--rounded-none: 0;
|
|
14
|
+
--rounded-xs: var(--radius-0);
|
|
15
|
+
--rounded-sm: var(--radius-2);
|
|
16
|
+
--rounded-md: var(--radius-4);
|
|
17
|
+
--rounded-lg: var(--radius-6);
|
|
18
|
+
--radius: var(--radius-8);
|
|
19
|
+
--rounded-xl: var(--radius-10);
|
|
20
|
+
--rounded-2xl: var(--radius-12);
|
|
21
|
+
--rounded-3xl: var(--radius-16);
|
|
22
|
+
--rounded-full: var(--radius-infinite);
|
|
25
23
|
}
|
|
@@ -1,42 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
--color-brand-neutrals-950: var(--color-neutral-950);
|
|
1
|
+
:root {
|
|
2
|
+
/* Primary color scale — mapped from brand-shades (emerald) */
|
|
3
|
+
--color-brand-neutrals-50: var(--color-neutral-50);
|
|
4
|
+
--color-brand-neutrals-100: var(--color-neutral-100);
|
|
5
|
+
--color-brand-neutrals-200: var(--color-neutral-200);
|
|
6
|
+
--color-brand-neutrals-300: var(--color-neutral-300);
|
|
7
|
+
--color-brand-neutrals-400: var(--color-neutral-400);
|
|
8
|
+
--color-brand-neutrals-500: var(--color-neutral-500);
|
|
9
|
+
--color-brand-neutrals-600: var(--color-neutral-600);
|
|
10
|
+
--color-brand-neutrals-700: var(--color-neutral-700);
|
|
11
|
+
--color-brand-neutrals-800: var(--color-neutral-800);
|
|
12
|
+
--color-brand-neutrals-900: var(--color-neutral-900);
|
|
13
|
+
--color-brand-neutrals-950: var(--color-neutral-950);
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
15
|
+
/* ========================= Brand Shades ========================= */
|
|
16
|
+
--color-brand-shades-50: var(--color-emerald-50);
|
|
17
|
+
--color-brand-shades-100: var(--color-emerald-100);
|
|
18
|
+
--color-brand-shades-200: var(--color-emerald-200);
|
|
19
|
+
--color-brand-shades-300: var(--color-emerald-300);
|
|
20
|
+
--color-brand-shades-400: var(--color-emerald-400);
|
|
21
|
+
--color-brand-shades-500: var(--color-emerald-500);
|
|
22
|
+
--color-brand-shades-600: var(--color-emerald-600);
|
|
23
|
+
--color-brand-shades-700: var(--color-emerald-700);
|
|
24
|
+
--color-brand-shades-800: var(--color-emerald-800);
|
|
25
|
+
--color-brand-shades-900: var(--color-emerald-900);
|
|
26
|
+
--color-brand-shades-950: var(--color-emerald-950);
|
|
28
27
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
28
|
+
/* ========================= Primary Landing ========================= */
|
|
29
|
+
--color-primary-landing-50: #f0fdf4;
|
|
30
|
+
--color-primary-landing-100: #dbfde6;
|
|
31
|
+
--color-primary-landing-200: #baf8cf;
|
|
32
|
+
--color-primary-landing-300: #84f1aa;
|
|
33
|
+
--color-primary-landing-400: #48e07d;
|
|
34
|
+
--color-primary-landing-500: #1db954;
|
|
35
|
+
--color-primary-landing-600: #14a547;
|
|
36
|
+
--color-primary-landing-700: #13823b;
|
|
37
|
+
--color-primary-landing-800: #156633;
|
|
38
|
+
--color-primary-landing-900: #13542c;
|
|
39
|
+
--color-primary-landing-950: #042f15;
|
|
42
40
|
}
|
|
@@ -1,35 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
--chart-5: #fe9a00;
|
|
1
|
+
:root {
|
|
2
|
+
/* Chart */
|
|
3
|
+
--chart-1: #f54a00;
|
|
4
|
+
--chart-2: #009689;
|
|
5
|
+
--chart-3: #104e64;
|
|
6
|
+
--chart-4: #ffb900;
|
|
7
|
+
--chart-5: #fe9a00;
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
--positive: #009689;
|
|
10
|
+
--negative: #f54a00;
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
--fill: #bfdeffb3;
|
|
13
|
+
--stroke: #8ec5ff;
|
|
14
|
+
--fill-2: #aaccffb3;
|
|
15
|
+
--stroke-2: #3f8dff;
|
|
16
|
+
}
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
18
|
+
.dark {
|
|
19
|
+
/* Chart */
|
|
20
|
+
--chart-1: #1447e6;
|
|
21
|
+
--chart-2: #00bc7d;
|
|
22
|
+
--chart-3: #fd9a00;
|
|
23
|
+
--chart-4: #ad46ff;
|
|
24
|
+
--chart-5: #ff2056;
|
|
26
25
|
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
--positive: #00bc7d;
|
|
27
|
+
--negative: #ff2056;
|
|
29
28
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
29
|
+
--fill: #475d75b3;
|
|
30
|
+
--stroke: #8ec5ff;
|
|
31
|
+
--fill-2: #1f4176b3;
|
|
32
|
+
--stroke-2: #3f8dff;
|
|
35
33
|
}
|