@clubmed/trident-ui 2.0.0-alpha.24 → 2.0.0-alpha.25

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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles/ui/controls.css +124 -150
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clubmed/trident-ui",
3
- "version": "2.0.0-alpha.24",
3
+ "version": "2.0.0-alpha.25",
4
4
  "type": "module",
5
5
  "description": "Shared ClubMed React UI components",
6
6
  "keywords": [
package/styles/ui/controls.css CHANGED
@@ -2,60 +2,53 @@
2
2
  /* This file is for styling the controls of the form inputs (checkbox, radio, switch, filter) */
3
3
  /* Styling the controls by their HTML semantic allows us to visually guarantee the non-regression of this semantic */
4
4
  /* Radio and Checkbox */
5
- label > span {
6
- > input[type='checkbox']:not([role='switch']),
7
- > input[type='radio'] {
8
- opacity: 0;
9
- position: absolute;
10
- width: 100%;
11
- height: 100%;
12
- border: 0;
13
-
14
- + span {
15
- @apply border transition-all duration-200;
16
-
17
- --tw-ring-color: transparent;
18
- border-color: var(--color-middleGrey);
19
- position: relative;
20
- display: flex;
21
- align-items: center;
22
- justify-content: center;
23
-
24
- svg {
25
- opacity: 0;
26
- transform: scale(0);
27
- transform-origin: center;
28
- transition: all var(--transition-duration-boop) var(--transition-fn-boop);
29
- }
30
- }
31
-
32
- &:checked + span svg {
33
- opacity: 1;
34
- transform: scale(1);
35
- }
36
-
37
- &:checked,
38
- &:not([disabled]):hover {
39
- + span {
40
- @apply border-black;
41
- }
42
- }
43
-
44
- &:focus-visible + span {
45
- @apply ring-8;
46
- --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
47
- }
48
- }
49
-
50
- > input[type='radio'] + span {
51
- @apply rounded-full;
52
- }
53
-
54
- > input[type='checkbox']:not([role='switch']) + span {
55
- border-radius: calc(var(--spacing) * 8);
56
- }
5
+ label > span > input[type='checkbox']:not([role='switch']),
6
+ label > span > input[type='radio'] {
7
+ opacity: 0;
8
+ position: absolute;
9
+ width: 100%;
10
+ height: 100%;
11
+ border: 0;
12
+ }
13
+ label > span > input[type='checkbox']:not([role='switch']) + span,
14
+ label > span > input[type='radio'] + span {
15
+ @apply border transition-all duration-200;
16
+ --tw-ring-color: transparent;
17
+ border-color: var(--color-middleGrey);
18
+ position: relative;
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ }
23
+ label > span > input[type='checkbox']:not([role='switch']) + span svg,
24
+ label > span > input[type='radio'] + span svg {
25
+ opacity: 0;
26
+ transform: scale(0);
27
+ transform-origin: center;
28
+ transition: all var(--transition-duration-boop) var(--transition-fn-boop);
29
+ }
30
+ label > span > input[type='checkbox']:not([role='switch']):checked + span svg,
31
+ label > span > input[type='radio']:checked + span svg {
32
+ opacity: 1;
33
+ transform: scale(1);
34
+ }
35
+ label > span > input[type='checkbox']:not([role='switch']):checked + span,
36
+ label > span > input[type='checkbox']:not([role='switch']):not([disabled]):hover + span,
37
+ label > span > input[type='radio']:checked + span,
38
+ label > span > input[type='radio']:not([disabled]):hover + span {
39
+ @apply border-black;
40
+ }
41
+ label > span > input[type='checkbox']:not([role='switch']):focus-visible + span,
42
+ label > span > input[type='radio']:focus-visible + span {
43
+ @apply ring-8;
44
+ --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
45
+ }
46
+ label > span > input[type='radio'] + span {
47
+ @apply rounded-full;
48
+ }
49
+ label > span > input[type='checkbox']:not([role='switch']) + span {
50
+ border-radius: calc(var(--spacing) * 8);
57
51
  }
58
-
59
52
  /* Filter */
60
53
  @media (hover: hover) and (pointer: fine) {
61
54
  label:active > input[type='checkbox'][data-name='Filter']:not(:disabled) {
@@ -64,106 +57,87 @@
64
57
  /* @apply active:animate-boop; */
65
58
  }
66
59
  }
67
-
68
60
  label > input[type='checkbox'][data-name='Filter'] {
69
61
  @apply opacity-0 absolute w-full h-full border-0;
70
-
71
- + span {
72
- --tw-ring-color: transparent;
73
- @apply transition-all;
74
- @apply relative;
75
- @apply flex;
76
- @apply items-center;
77
- @apply justify-center;
78
- @apply border;
79
- @apply px-20;
80
- @apply py-12;
81
- @apply duration-200;
82
-
83
- transition-property: transform, colors;
84
- border-radius: var(--radius-pill);
85
- border-color: var(--color-middleGrey);
86
-
87
- .check {
88
- @apply text-black opacity-0;
89
- transform: scale(0);
90
- transform-origin: center;
91
- width: 0;
92
- transition: all var(--transition-duration-boop) var(--transition-fn-boop);
93
- }
94
- }
95
-
96
- &:not([disabled]):not(:checked):hover + span {
97
- @apply border-black;
98
- }
99
-
100
- &:checked + span {
101
- border-color: var(--color-saffron);
102
- background-color: var(--color-saffron);
103
-
104
- .check {
105
- @apply opacity-100 ml-8;
106
- width: 24px;
107
- transform: scale(1);
108
- }
109
- }
110
-
111
- &:focus-visible + span {
112
- @apply ring-8;
113
- --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
114
- }
115
62
  }
116
-
63
+ label > input[type='checkbox'][data-name='Filter'] + span {
64
+ --tw-ring-color: transparent;
65
+ @apply transition-all;
66
+ @apply relative;
67
+ @apply flex;
68
+ @apply items-center;
69
+ @apply justify-center;
70
+ @apply border;
71
+ @apply px-20;
72
+ @apply py-12;
73
+ @apply duration-200;
74
+ transition-property: transform, colors;
75
+ border-radius: var(--radius-pill);
76
+ border-color: var(--color-middleGrey);
77
+ }
78
+ label > input[type='checkbox'][data-name='Filter'] + span .check {
79
+ @apply text-black opacity-0;
80
+ transform: scale(0);
81
+ transform-origin: center;
82
+ width: 0;
83
+ transition: all var(--transition-duration-boop) var(--transition-fn-boop);
84
+ }
85
+ label > input[type='checkbox'][data-name='Filter']:not([disabled]):not(:checked):hover + span {
86
+ @apply border-black;
87
+ }
88
+ label > input[type='checkbox'][data-name='Filter']:checked + span {
89
+ border-color: var(--color-saffron);
90
+ background-color: var(--color-saffron);
91
+ }
92
+ label > input[type='checkbox'][data-name='Filter']:checked + span .check {
93
+ @apply opacity-100 ml-8;
94
+ width: 24px;
95
+ transform: scale(1);
96
+ }
97
+ label > input[type='checkbox'][data-name='Filter']:focus-visible + span {
98
+ @apply ring-8;
99
+ --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
100
+ }
117
101
  /* Switch */
118
- label > span > input[type='checkbox'][role='switch'] {
119
- + span {
120
- @apply transition-all;
121
- @apply relative flex items-center transition-colors duration-200;
122
- @apply ring-0;
123
- --tw-ring-color: color-mix(in oklab, var(--color-lavender) 0%, transparent);
124
- background-color: var(--color-middleGrey);
125
- border-radius: var(--radius-pill);
126
-
127
- > svg {
128
- transition: all var(--transition-duration-boop) var(--transition-fn-boop);
129
- transform: translate(calc(0% + 4px));
130
-
131
- circle + circle {
132
- opacity: 1;
133
- transition: opacity var(--transition-duration-boop) var(--transition-fn-boop);
134
- }
135
-
136
- path {
137
- opacity: 0;
138
- scale: 0;
139
- transform-origin: center;
140
- transition:
141
- opacity var(--transition-duration-boop) var(--transition-fn-boop),
142
- scale var(--transition-duration-boop) var(--transition-fn-boop);
143
- }
144
- }
145
- }
146
-
147
- &:checked + span {
148
- background-color: var(--color-saffron);
149
-
150
- > svg {
151
- transform: translate(calc(100% + 4px));
152
-
153
- circle + circle {
154
- opacity: 0;
155
- }
156
-
157
- path {
158
- scale: 1;
159
- opacity: 1;
160
- }
161
- }
162
- }
163
-
164
- &:focus-visible + span {
165
- @apply ring-8;
166
- --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
167
- }
102
+ label > span > input[type='checkbox'][role='switch'] + span {
103
+ @apply transition-all;
104
+ @apply relative flex items-center transition-colors duration-200;
105
+ @apply ring-0;
106
+ --tw-ring-color: color-mix(in oklab, var(--color-lavender) 0%, transparent);
107
+ background-color: var(--color-middleGrey);
108
+ border-radius: var(--radius-pill);
109
+ }
110
+ label > span > input[type='checkbox'][role='switch'] + span > svg {
111
+ transition: all var(--transition-duration-boop) var(--transition-fn-boop);
112
+ transform: translate(calc(0% + 4px));
113
+ }
114
+ label > span > input[type='checkbox'][role='switch'] + span > svg circle + circle {
115
+ opacity: 1;
116
+ transition: opacity var(--transition-duration-boop) var(--transition-fn-boop);
117
+ }
118
+ label > span > input[type='checkbox'][role='switch'] + span > svg path {
119
+ opacity: 0;
120
+ scale: 0;
121
+ transform-origin: center;
122
+ transition:
123
+ opacity var(--transition-duration-boop) var(--transition-fn-boop),
124
+ scale var(--transition-duration-boop) var(--transition-fn-boop);
125
+ }
126
+ label > span > input[type='checkbox'][role='switch']:checked + span {
127
+ background-color: var(--color-saffron);
128
+ }
129
+ label > span > input[type='checkbox'][role='switch']:checked + span > svg {
130
+ transform: translate(calc(100% + 4px));
131
+ }
132
+ label > span > input[type='checkbox'][role='switch']:checked + span > svg circle + circle {
133
+ opacity: 0;
134
+ }
135
+ label > span > input[type='checkbox'][role='switch']:checked + span > svg path {
136
+ scale: 1;
137
+ opacity: 1;
138
+ }
139
+ label > span > input[type='checkbox'][role='switch']:focus-visible + span {
140
+ @apply ring-8;
141
+ --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
168
142
  }
169
143
  }