@wizco/fenixds-core 1.0.1

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 (18) hide show
  1. package/README.md +24 -0
  2. package/esm2022/lib/styles/styles.component.mjs +12 -0
  3. package/esm2022/public-api.mjs +5 -0
  4. package/esm2022/wizco-fenixds-core.mjs +5 -0
  5. package/fesm2022/wizco-fenixds-core.mjs +23 -0
  6. package/fesm2022/wizco-fenixds-core.mjs.map +1 -0
  7. package/index.d.ts +5 -0
  8. package/lib/styles/styles.component.d.ts +5 -0
  9. package/package.json +33 -0
  10. package/public-api.d.ts +1 -0
  11. package/styles/core.css +3310 -0
  12. package/styles/scss/button.scss +288 -0
  13. package/styles/scss/core.scss +6 -0
  14. package/styles/scss/forms.scss +343 -0
  15. package/styles/scss/helpers.scss +4213 -0
  16. package/styles/scss/tooltip.scss +179 -0
  17. package/styles/scss/typography.scss +84 -0
  18. package/styles/scss/variables.scss +113 -0
package/styles/scss/tooltip.scss ADDED
@@ -0,0 +1,179 @@
1
+ [data-tooltip] {
2
+ position: relative; /* opinion 1 */
3
+ }
4
+
5
+ /* Applies to all tooltips */
6
+ [data-tooltip]::before,
7
+ [data-tooltip]::after {
8
+ text-transform: none; /* opinion 2 */
9
+ font-size: .9em; /* opinion 3 */
10
+ line-height: 1;
11
+ user-select: none;
12
+ pointer-events: none;
13
+ position: absolute;
14
+ display: none;
15
+ opacity: 0;
16
+ }
17
+ [data-tooltip]::before {
18
+ content: '';
19
+ border: 5px solid transparent; /* opinion 4 */
20
+ z-index: 1001; /* absurdity 1 */
21
+ }
22
+ [data-tooltip]::after {
23
+ content: attr(data-tooltip); /* magic! */
24
+
25
+ /* most of the rest of this is opinion */
26
+ text-align: center;
27
+
28
+ /*
29
+ Let the content set the size of the tooltips
30
+ but this will also keep them from being obnoxious
31
+ */
32
+ min-width: 3em;
33
+ max-width: 21em;
34
+ white-space: nowrap;
35
+ overflow: hidden;
36
+ text-overflow: ellipsis;
37
+ padding: 1ch 1.5ch;
38
+ border-radius: .3ch;
39
+ box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
40
+ background: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
41
+ color: var(--tooltip-color, var(--wco-color-primary-50, #fff));
42
+ z-index: 1000; /* absurdity 2 */
43
+ }
44
+
45
+ /* Make the tooltips respond to hover */
46
+ [data-tooltip]:hover::before,
47
+ [data-tooltip]:hover::after {
48
+ display: block;
49
+ }
50
+
51
+ /* don't show empty tooltips */
52
+ [data-tooltip='']::before,
53
+ [data-tooltip='']::after {
54
+ display: none !important;
55
+ }
56
+
57
+ /* FLOW: top */
58
+ [data-tooltip]:not([data-flow])::before,
59
+ [data-tooltip][data-flow^="top"]::before {
60
+ bottom: 100%;
61
+ border-bottom-width: 0;
62
+ border-top-color: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
63
+ }
64
+ [data-tooltip]:not([data-flow])::after,
65
+ [data-tooltip][data-flow^="top"]::after {
66
+ bottom: calc(100% + 5px);
67
+ }
68
+ [data-tooltip]:not([data-flow])::before,
69
+ [data-tooltip]:not([data-flow])::after,
70
+ [data-tooltip][data-flow^="top"]::before,
71
+ [data-tooltip][data-flow^="top"]::after {
72
+ left: 50%;
73
+ transform: translate(-50%, -.5em);
74
+ }
75
+
76
+ /* FLOW: bottom */
77
+ [data-tooltip][data-flow^="bottom"]::before {
78
+ top: 100%;
79
+ border-top-width: 0;
80
+ border-bottom-color: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
81
+
82
+ }
83
+ [data-tooltip][data-flow^="bottom"]::after {
84
+ top: calc(100% + 5px);
85
+ }
86
+ [data-tooltip][data-flow^="bottom"]::before,
87
+ [data-tooltip][data-flow^="bottom"]::after {
88
+ left: 50%;
89
+ transform: translate(-50%, .5em);
90
+ }
91
+
92
+ /* FLOW: LEFT */
93
+ [data-tooltip][data-flow^="left"]::before {
94
+ top: 50%;
95
+ border-right-width: 0;
96
+ border-left-color: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
97
+ left: calc(0em - 5px);
98
+ transform: translate(-.5em, -50%);
99
+ }
100
+ [data-tooltip][data-flow^="left"]::after {
101
+ top: 50%;
102
+ right: calc(100% + 5px);
103
+ transform: translate(-.5em, -50%);
104
+ }
105
+
106
+ /* FLOW: RIGHT */
107
+ [data-tooltip][data-flow^="right"]::before {
108
+ top: 50%;
109
+ border-left-width: 0;
110
+ border-right-color: var(--tooltip-background, var(--wco-color-neutral-600est, #333));
111
+ right: calc(0em - 5px);
112
+ transform: translate(.5em, -50%);
113
+ }
114
+ [data-tooltip][data-flow^="right"]::after {
115
+ top: 50%;
116
+ left: calc(100% + 5px);
117
+ transform: translate(.5em, -50%);
118
+ }
119
+
120
+ /* KEYFRAMES */
121
+ @keyframes tooltips-vert {
122
+ to {
123
+ opacity: .9;
124
+ transform: translate(-50%, 0);
125
+ }
126
+ }
127
+
128
+ @keyframes tooltips-horz {
129
+ to {
130
+ opacity: .9;
131
+ transform: translate(0, -50%);
132
+ }
133
+ }
134
+
135
+ /* FX All The Things */
136
+ [data-tooltip]:not([data-flow]):hover::before,
137
+ [data-tooltip]:not([data-flow]):hover::after,
138
+ [data-tooltip][data-flow^="top"]:hover::before,
139
+ [data-tooltip][data-flow^="top"]:hover::after,
140
+ [data-tooltip][data-flow^="bottom"]:hover::before,
141
+ [data-tooltip][data-flow^="bottom"]:hover::after {
142
+ animation: tooltips-vert 300ms ease-out forwards;
143
+ }
144
+
145
+ [data-tooltip][data-flow^="left"]:hover::before,
146
+ [data-tooltip][data-flow^="left"]:hover::after,
147
+ [data-tooltip][data-flow^="right"]:hover::before,
148
+ [data-tooltip][data-flow^="right"]:hover::after {
149
+ animation: tooltips-horz 300ms ease-out forwards;
150
+ }
151
+
152
+ .tooltip-white {
153
+ --tooltip-background: var(--wco-color-neutral-50);
154
+ --tooltip-color: var(--wco-color-neutral-900);
155
+ }
156
+ .tooltip-primary {
157
+ --tooltip-background: var(--wco-color-primary-500);
158
+ --tooltip-color: var(--wco-color-primary-900);
159
+ }
160
+ .tooltip-secondary {
161
+ --tooltip-background: var(--wco-color-secondary-500);
162
+ --tooltip-color: var(--wco-color-secondary-50);
163
+ }
164
+ .tooltip-warning {
165
+ --tooltip-background: var(--wco-color-warning-500);
166
+ --tooltip-color: var(--wco-color-warning-extradark);
167
+ }
168
+ .tooltip-error {
169
+ --tooltip-background: var(--wco-color-danger-500);
170
+ --tooltip-color: var(--wco-color-danger-900-extradark);
171
+ }
172
+ .tooltip-success {
173
+ --tooltip-background: var(--wco-color-success-500);
174
+ --tooltip-color: var(--wco-color-success-extradark);
175
+ }
176
+ .tooltip-info {
177
+ --tooltip-background: var(--wco-color-info-500);
178
+ --tooltip-color: var(--wco-color-info-900);
179
+ }
package/styles/scss/typography.scss ADDED
@@ -0,0 +1,84 @@
1
+
2
+
3
+ .display-1,
4
+ .display-2,
5
+ .display-3,
6
+ .display-4,
7
+ .display-5,
8
+ .display-6 {
9
+ font-family: var(--wco-font-family);
10
+ line-height: var(--wco-font-lineheight-500);
11
+ font-weight: var(--wco-font-weight-500);
12
+ strong {
13
+ font-weight: var(--wco-font-weight-bold);
14
+ }
15
+ }
16
+
17
+ .display-1 {
18
+ font-size: var(--wco-font-size-huge);
19
+ color: var(--wco-color-neutral-900);
20
+ font-weight: var(--wco-font-weight-bold);
21
+ @media (max-width: 768px) {
22
+ font-size: var(--wco-font-size-xxl);
23
+ };
24
+ }
25
+ .display-2 {
26
+ font-size: var(--wco-font-size-xxxl);
27
+ color: var(--wco-color-neutral-900);
28
+ @media (max-width: 768px) {
29
+ font-size: var(--wco-font-size-xl);
30
+ };
31
+ }
32
+ .display-3 {
33
+ font-size: var(--wco-font-size-xxl);
34
+ color: var(--wco-color-neutral-900);
35
+ @media (max-width: 768px) {
36
+ font-size: var(--wco-font-size-xl);
37
+ };
38
+ }
39
+ .display-4 {
40
+ font-size: var(--wco-font-size-xl);
41
+ @media (max-width: 768px) {
42
+ font-size: var(--wco-font-size-lg);
43
+ };
44
+ }
45
+ .display-5 {
46
+ font-size: var(--wco-font-size-lg);
47
+ @media (max-width: 768px) {
48
+ font-size: var(--wco-font-size-md);
49
+ };
50
+ }
51
+
52
+ .display-6 {
53
+ font-size: var(--wco-font-size-md);
54
+ @media (max-width: 768px) {
55
+ font-size: var(--wco-font-size-sm);
56
+ };
57
+ }
58
+
59
+
60
+ .display-body {
61
+ font-size: var(--wco-font-size-sm);
62
+ line-height: var(--wco-font-lineheight-super-distant);
63
+ @media (max-width: 768px) {
64
+ font-size: var(--wco-font-size-sm);
65
+ };
66
+ }
67
+
68
+ .display-text {
69
+ font-size: var(--wco-font-size-xs);
70
+ line-height: var(--wco-font-lineheight-500);
71
+ @media (max-width: 768px) {
72
+ font-size: var(--wco-font-size-xxs);
73
+ };
74
+ }
75
+
76
+ .display-p {
77
+ font-size: var(--wco-iconography-size-xxs);
78
+ line-height: var(--wco-font-lineheight-500);
79
+ }
80
+
81
+ .display-caption {
82
+ font-size: var(--wco-font-size-xxxs);
83
+ line-height: var(--wco-font-lineheight-500);
84
+ }
package/styles/scss/variables.scss ADDED
@@ -0,0 +1,113 @@
1
+ :root {
2
+ --wco-font-family: 'Figtree', sans-serif;
3
+ --wco-color-primary-text: #fff;
4
+ --wco-color-primary-50: #fff0e4;
5
+ --wco-color-primary-100: #ffb578;
6
+ --wco-color-primary-300: #ff8826;
7
+ --wco-color-primary-500: #fa780c;
8
+ --wco-color-primary-600: #bf5600;
9
+ --wco-color-primary-700: #8f4000;
10
+ --wco-color-primary-900: #301600;
11
+ --wco-color-secondary-text: #fff;
12
+ --wco-color-secondary-50: #ecdff0;
13
+ --wco-color-secondary-100: #c69ed3;
14
+ --wco-color-secondary-300: #aa6ebc;
15
+ --wco-color-secondary-500: #a05eb5;
16
+ --wco-color-secondary-600: #844597;
17
+ --wco-color-secondary-700: #633471;
18
+ --wco-color-secondary-900: #42234b;
19
+ --wco-color-neutral-50: #fcfcfc;
20
+ --wco-color-neutral-100: #E9EBEC;
21
+ --wco-color-neutral-300: #C3C8CC;
22
+ --wco-color-neutral-500: #8d9399;
23
+ --wco-color-neutral-600: #6d747a;
24
+ --wco-color-neutral-700: #50555a;
25
+ --wco-color-neutral-900: #080809;
26
+ --wco-color-bg: #eeebef;
27
+ --wco-color-panel: #fcfcfc;
28
+ --wco-color-success-50: #e9f5e9;
29
+ --wco-color-success-100: #c0e0c0;
30
+ --wco-color-success-300: #8ac88a;
31
+ --wco-color-success-500: #5cb85c;
32
+ --wco-color-success-600: #4ca74c;
33
+ --wco-color-success-700: #3c963c;
34
+ --wco-color-success-900: #1e6b1e;
35
+ --wco-color-warning-50: #fff8e5;
36
+ --wco-color-warning-100: #ffe6b3;
37
+ --wco-color-warning-300: #ffc266;
38
+ --wco-color-warning-500: #ffb84d;
39
+ --wco-color-warning-600: #ffa833;
40
+ --wco-color-warning-700: #ff981a;
41
+ --wco-color-warning-900: #804d00;
42
+ --wco-color-danger-50: #fcedee;
43
+ --wco-color-danger-100: #f6cdd0;
44
+ --wco-color-danger-300: #ee8f94;
45
+ --wco-color-danger-500: #e85f58;
46
+ --wco-color-danger-600: #e13f38;
47
+ --wco-color-danger-700: #db1f18;
48
+ --wco-color-danger-900: #80100a;
49
+ --wco-color-info-50: #e5f5ff;
50
+ --wco-color-info-100: #b3e0ff;
51
+ --wco-color-info-300: #66b8ff;
52
+ --wco-color-info-500: #4da6ff;
53
+ --wco-color-info-600: #3394ff;
54
+ --wco-color-info-700: #1a82ff;
55
+ --wco-color-info-900: #004d80;
56
+ --wco-font-size-xxxs: 12px;
57
+ --wco-font-size-xxs: 14px;
58
+ --wco-font-size-xs: 16px;
59
+ --wco-font-size-sm: 18px;
60
+ --wco-font-size-md: 20px;
61
+ --wco-font-size-lg: 24px;
62
+ --wco-font-size-xl: 32px;
63
+ --wco-font-size-xxl: 36px;
64
+ --wco-font-size-xxxl: 48px;
65
+ --wco-font-size-huge: 64px;
66
+ --wco-spacing-none: 0px;
67
+ --wco-spacing-quark: 4px;
68
+ --wco-spacing-nano: 8px;
69
+ --wco-spacing-xxxs: 12px;
70
+ --wco-spacing-xxs: 16px;
71
+ --wco-spacing-xs: 24px;
72
+ --wco-spacing-sm: 32px;
73
+ --wco-spacing-md: 40px;
74
+ --wco-spacing-lg: 48px;
75
+ --wco-spacing-xl: 56px;
76
+ --wco-spacing-xxl: 64px;
77
+ --wco-spacing-xxxl: 80px;
78
+ --wco-spacing-huge: 120px;
79
+ --wco-font-lineheight-tight: 100%;
80
+ --wco-font-lineheight-500: 150%;
81
+ --wco-font-lineheight-distant: 170%;
82
+ --wco-font-lineheight-super-distant: 180%;
83
+ --wco-font-lineheight-faraway: 200%;
84
+ --wco-font-weight-300: 300;
85
+ --wco-font-weight-regular: 400;
86
+ --wco-font-weight-500: 500;
87
+ --wco-font-weight-bold: 700;
88
+ --wco-font-weight-black: 900;
89
+ --wco-radius-none: 0px;
90
+ --wco-radius-sm: 4px;
91
+ --wco-radius-md: 8px;
92
+ --wco-radius-lg: 24px;
93
+ --wco-radius-pill: 500px;
94
+ --wco-radius-circular: 50%;
95
+ --wco-borderwidth-none: 0px;
96
+ --wco-borderwidth-hairline: 0.5px;
97
+ --wco-borderwidth-thin: 1px;
98
+ --wco-borderwidth-thick: 2px;
99
+ --wco-opacity-semi-transparent: 16%;
100
+ --wco-opacity-100: 20%;
101
+ --wco-opacity-500: 32%;
102
+ --wco-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
103
+ --wco-shadow-level-1: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
104
+ --wco-shadow-level-2: 0px 4px 16px 0px rgba(0, 0, 0, 0.2);
105
+ --wco-shadow-level-3: 0px 16px 32px rgba(0, 0, 0, 0.2);
106
+ --wco-iconography-size-xxs: 16px;
107
+ --wco-iconography-size-xs: 20px;
108
+ --wco-iconography-size-sm: 24px;
109
+ --wco-iconography-size-md: 28px;
110
+ --wco-iconography-size-lg: 32px;
111
+ --wco-iconography-size-xl: 48px;
112
+ --wco-iconography-size-xxl: 64px;
113
+ }