@policystudio/policy-studio-ui-vue 1.0.17 → 1.0.18
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
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {Meta } from '@storybook/addon-docs';
|
|
2
2
|
|
|
3
3
|
<Meta title="Colors" />
|
|
4
4
|
|
|
@@ -11,58 +11,59 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
|
|
|
11
11
|
|
|
12
12
|
## Blue
|
|
13
13
|
<div class="psui-flex">
|
|
14
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-
|
|
15
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-
|
|
16
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-
|
|
17
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-
|
|
18
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-
|
|
19
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-
|
|
20
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-
|
|
14
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy" data-to-copy="#5094D3">Blue #5094D3</div>
|
|
15
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80 click-to-copy" data-to-copy="#002A3A">Blue 80 #002A3A</div>
|
|
16
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70 click-to-copy" data-to-copy="#00465F">Blue 70 #00465F</div>
|
|
17
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60 click-to-copy" data-to-copy="#318FAC">Blue 60 #318FAC</div>
|
|
18
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50 click-to-copy" data-to-copy="#64B5CE">Blue 50 #64B5CE</div>
|
|
19
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20 click-to-copy" data-to-copy="#E0EFF6">Blue 20 #E0EFF6</div>
|
|
20
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10 click-to-copy" data-to-copy="#ECF7FB">Blue 10 #ECF7FB</div>
|
|
21
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white click-to-copy" data-to-copy="#ffffff">White #ffffff</div>
|
|
21
22
|
</div>
|
|
22
23
|
|
|
23
24
|
## Gray
|
|
24
25
|
<div class="psui-flex">
|
|
25
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80">Gray 80</div>
|
|
26
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70">Gray 70</div>
|
|
27
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60">Gray 60</div>
|
|
28
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50">Gray 50</div>
|
|
29
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40">Gray 40</div>
|
|
30
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30">Gray 30</div>
|
|
31
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20">Gray 20</div>
|
|
32
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10">Gray 10</div>
|
|
26
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80 click-to-copy" data-to-copy="#28323B">Gray 80 #28323B</div>
|
|
27
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70 click-to-copy" data-to-copy="#34404A">Gray 70 #34404A</div>
|
|
28
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60 click-to-copy" data-to-copy="#515E6A">Gray 60 #515E6A</div>
|
|
29
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50 click-to-copy" data-to-copy="#798490">Gray 50 #798490</div>
|
|
30
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40 click-to-copy" data-to-copy="#A2ACB7">Gray 40 #A2ACB7</div>
|
|
31
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30 click-to-copy" data-to-copy="#D6DDE5">Gray 30 #D6DDE5</div>
|
|
32
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20 click-to-copy" data-to-copy="#E6ECF2">Gray 20 #E6ECF2</div>
|
|
33
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10 click-to-copy" data-to-copy="#F3F6F9">Gray 10 #F3F6F9</div>
|
|
33
34
|
</div>
|
|
34
35
|
|
|
35
36
|
## Yellow
|
|
36
37
|
<div class="psui-flex">
|
|
37
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80">Yellow 80</div>
|
|
38
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70">Yellow 70</div>
|
|
39
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20">Yellow 20</div>
|
|
40
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10">Yellow 10</div>
|
|
38
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80 click-to-copy" data-to-copy="#834C0D">Yellow 80 #834C0D</div>
|
|
39
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70 click-to-copy" data-to-copy="#B87305">Yellow 70 #B87305</div>
|
|
40
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20 click-to-copy" data-to-copy="#EDAB3E">Yellow 20 #EDAB3E</div>
|
|
41
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10 click-to-copy" data-to-copy="#FDF3E3">Yellow 10 #FDF3E3</div>
|
|
41
42
|
</div>
|
|
42
43
|
|
|
43
44
|
## Green
|
|
44
45
|
<div class="psui-flex">
|
|
45
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80">Green 80</div>
|
|
46
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70">Green 70</div>
|
|
47
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20">Green 20</div>
|
|
48
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10">Green 10</div>
|
|
46
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80 click-to-copy" data-to-copy="#286943">Green 80 #286943</div>
|
|
47
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70 click-to-copy" data-to-copy="#44A06A">Green 70 #44A06A</div>
|
|
48
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20 click-to-copy" data-to-copy="#5DB883">Green 20 #5DB883</div>
|
|
49
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10 click-to-copy" data-to-copy="#DEF8E8">Green 10 #DEF8E8</div>
|
|
49
50
|
</div>
|
|
50
51
|
|
|
51
52
|
## Red
|
|
52
53
|
<div class="psui-flex">
|
|
53
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80">Red 80</div>
|
|
54
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70">Red 70</div>
|
|
55
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20">Red 20</div>
|
|
56
|
-
<div class="psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10">Red 10</div>
|
|
54
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy" data-to-copy="#832F2E">Red 80 #832F2E</div>
|
|
55
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy" data-to-copy="#AA3937">Red 70 #AA3937</div>
|
|
56
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy" data-to-copy="#D65C5A">Red 20 #D65C5A</div>
|
|
57
|
+
<div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10 click-to-copy" data-to-copy="#FCEBEB">Red 10 #FCEBEB</div>
|
|
57
58
|
</div>
|
|
58
59
|
|
|
59
60
|
## Chart colors
|
|
60
61
|
<div class="psui-flex">
|
|
61
|
-
<div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky">Sky</div>
|
|
62
|
-
<div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal">Teal</div>
|
|
63
|
-
<div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald">Emerald</div>
|
|
64
|
-
<div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard">Mustard</div>
|
|
65
|
-
<div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange">Orange</div>
|
|
66
|
-
<div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink">Pink</div>
|
|
67
|
-
<div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple">Purple</div>
|
|
62
|
+
<div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky click-to-copy" data-to-copy="#518BE2">Sky #518BE2</div>
|
|
63
|
+
<div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal click-to-copy" data-to-copy="#57C0BA">Teal #57C0BA</div>
|
|
64
|
+
<div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald click-to-copy" data-to-copy="#8CCA82">Emerald #8CCA82</div>
|
|
65
|
+
<div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard click-to-copy" data-to-copy="#E9CF74">Mustard #E9CF74</div>
|
|
66
|
+
<div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange click-to-copy" data-to-copy="#FF906D">Orange #FF906D</div>
|
|
67
|
+
<div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink click-to-copy" data-to-copy="#FF77B8">Pink #FF77B8</div>
|
|
68
|
+
<div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple click-to-copy" data-to-copy="#9278C9">Purple #9278C9</div>
|
|
68
69
|
</div>
|
|
@@ -20,3 +20,27 @@ Default.args = {
|
|
|
20
20
|
items: items,
|
|
21
21
|
selected: selected
|
|
22
22
|
};
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Hey Luciano!
|
|
27
|
+
* Adicionei este script aqui pois não entendi como criar uma story com script em MDX ou algo que rode geral, saca?
|
|
28
|
+
* Mas é uma função simples para copiar o HEX das cores...
|
|
29
|
+
* Se quiser dar uma melhorada nessa parte, fique a vontade meu chegado! TMJ
|
|
30
|
+
*/
|
|
31
|
+
window.addEventListener('click', (ev) => {
|
|
32
|
+
if(ev.target.classList.contains('click-to-copy')) {
|
|
33
|
+
copyText(ev.target.dataset.toCopy)
|
|
34
|
+
}
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
function copyText(textToCopy) {
|
|
38
|
+
var myTemporaryInputElement = document.createElement("input")
|
|
39
|
+
myTemporaryInputElement.type = "text"
|
|
40
|
+
myTemporaryInputElement.value = textToCopy
|
|
41
|
+
document.body.appendChild(myTemporaryInputElement)
|
|
42
|
+
myTemporaryInputElement.select()
|
|
43
|
+
document.execCommand("Copy")
|
|
44
|
+
document.body.removeChild(myTemporaryInputElement)
|
|
45
|
+
alert('Item copied to clipboard!')
|
|
46
|
+
}
|