@jrgermain/stylesheet 0.0.3 → 0.1.0

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 (25) hide show
  1. package/dist/index.css +2760 -5122
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.min.css +1 -1
  4. package/dist/index.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/styles/_variables.scss +0 -3
  7. package/src/styles/components/_alert.scss +13 -16
  8. package/src/styles/components/_app.scss +301 -230
  9. package/src/styles/components/_button.scss +9 -3
  10. package/src/styles/components/_chip.scss +17 -31
  11. package/src/styles/components/_details.scss +17 -0
  12. package/src/styles/components/_dialog.scss +3 -3
  13. package/src/styles/components/_field.scss +3 -3
  14. package/src/styles/components/_layout.scss +1 -1
  15. package/src/svg/check-thick.svg +4 -0
  16. package/src/svg/check.svg +4 -0
  17. package/src/svg/dropdown.svg +4 -0
  18. package/src/svg/external.svg +4 -0
  19. package/src/svg/info-thick.svg +7 -0
  20. package/src/svg/info.svg +7 -0
  21. package/src/svg/warning-thick.svg +8 -0
  22. package/src/svg/warning.svg +8 -0
  23. package/src/svg/x-circle.svg +4 -0
  24. package/src/svg/x-thick.svg +4 -0
  25. package/src/svg/x.svg +4 -0
package/src/styles/components/_button.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  min-height: 2.6em;
31
31
  min-width: 3em;
32
32
  line-height: 1;
33
- font-family: var(--font-family-ui);
33
+ font-family: var(--font-family-body);
34
34
  box-shadow: var(--button-shadow);
35
35
  user-select: none;
36
36
  font-size: 1rem;
@@ -151,8 +151,6 @@
151
151
 
152
152
  &:is(.icon, .close) {
153
153
  border-radius: var(--radius-full);
154
- padding-inline: 0.5em;
155
- padding-block: 0.5em;
156
154
  min-width: 0;
157
155
  min-height: 0;
158
156
  aspect-ratio: 1;
@@ -170,6 +168,14 @@
170
168
  }
171
169
  }
172
170
 
171
+ &.icon {
172
+ padding: 0.5em;
173
+ }
174
+
175
+ &.close {
176
+ padding: 0.3em;
177
+ }
178
+
173
179
  &:not(.subtle, .close) {
174
180
  &::before {
175
181
  content: unset;
package/src/styles/components/_chip.scss CHANGED
@@ -35,7 +35,7 @@ $color-variants: (
35
35
  line-height: 1.2;
36
36
 
37
37
  &:is(:focus-visible, .focus) {
38
- box-shadow: 0 0 0 0.2em var(--chip-focus-ring-color);
38
+ box-shadow: 0 0 0 0.2em var(--chip-focus-color);
39
39
  }
40
40
 
41
41
  &.clickable {
@@ -46,7 +46,7 @@ $color-variants: (
46
46
  outline: 0;
47
47
  box-shadow:
48
48
  var(--shadow-s),
49
- 0 0 0 0.2em var(--chip-focus-ring-color);
49
+ 0 0 0 0.2em var(--chip-focus-color);
50
50
  }
51
51
 
52
52
  &:is(:hover, .hover) {
@@ -63,7 +63,7 @@ $color-variants: (
63
63
  &.#{$color} {
64
64
  --chip-bg-color: var(--color-#{$color}-6);
65
65
  --chip-border-color: var(--color-#{$color}-7);
66
- --chip-focus-ring-color: var(--color-#{$color}-transparent);
66
+ --chip-focus-color: var(--color-#{$color}-transparent);
67
67
  --chip-bg-color-active: var(--color-#{$color}-5);
68
68
  }
69
69
  }
@@ -71,7 +71,7 @@ $color-variants: (
71
71
  &.black {
72
72
  --chip-bg-color: black;
73
73
  --chip-border-color: var(--color-gray-4);
74
- --chip-focus-ring-color: var(--color-gray-transparent);
74
+ --chip-focus-color: var(--color-gray-transparent);
75
75
  --chip-bg-color-active: var(--color-gray-1);
76
76
  }
77
77
 
@@ -79,7 +79,7 @@ $color-variants: (
79
79
  --chip-fg-color: black;
80
80
  --chip-bg-color: white;
81
81
  --chip-border-color: var(--color-gray-8);
82
- --chip-focus-ring-color: var(--color-gray-transparent);
82
+ --chip-focus-color: var(--color-gray-transparent);
83
83
  --chip-bg-color-active: var(--color-gray-7);
84
84
  }
85
85
 
@@ -108,58 +108,44 @@ $color-variants: (
108
108
  font-size: 0.6em;
109
109
  border: var(--border-s) solid var(--chip-border-color);
110
110
  border-radius: var(--radius-full);
111
- transition-property: box-shadow, background-color, transform, opacity,
112
- border-color;
111
+ transition-property: background-color, border-color;
113
112
  transition-duration: 200ms;
114
113
  transition-timing-function: ease;
115
114
  position: relative;
116
- align-items: center;
117
- justify-content: center;
118
115
  overflow: hidden;
119
116
  cursor: pointer;
120
117
  height: 2em;
121
118
  width: 2em;
122
119
  user-select: none;
123
- background-color: transparent;
120
+ background-color: #0002;
124
121
  padding: 0;
125
122
  display: inline-flex;
126
-
127
- &::before {
128
- content: "";
129
- width: 100%;
130
- height: 100%;
131
- opacity: 0.7;
132
- position: absolute;
133
- inset-block-start: 0;
134
- inset-inline-start: 0;
135
- background-color: var(--chip-border-color);
136
- transition-duration: 200ms;
137
- transition-timing-function: ease;
138
- transition-property: background-color, opacity;
139
- }
123
+ box-shadow: none;
140
124
 
141
125
  &::after {
142
126
  content: "";
143
- width: 1.2em;
144
- height: 1.2em;
127
+ width: 1.7em;
128
+ height: 1.7em;
145
129
  mask-image: #{utils.svg-to-data-url(
146
- '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="black" d="M208.49 191.51a12 12 0 0 1-17 17L128 145l-63.51 63.49a12 12 0 0 1-17-17L111 128L47.51 64.49a12 12 0 0 1 17-17L128 111l63.51-63.52a12 12 0 0 1 17 17L145 128Z"/></svg>'
130
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>'
147
131
  )};
148
132
  mask-size: contain;
149
133
  mask-repeat: no-repeat;
134
+ mask-position: center;
150
135
  background-color: var(--chip-fg-color);
136
+ margin: auto;
151
137
  }
152
138
 
153
139
  &:is(:focus-visible, .focus) {
154
140
  border-color: var(--chip-fg-color);
155
141
  }
156
142
 
157
- &:is(:hover, .hover, :focus-visible, .focus)::before {
158
- opacity: 1;
143
+ &:is(:hover, .hover, :focus-visible, .focus) {
144
+ background-color: #0001;
159
145
  }
160
146
 
161
- &:is(:active, .active)::before {
162
- opacity: 0.5;
147
+ &:is(:active, .active) {
148
+ background-color: #0003;
163
149
  }
164
150
  }
165
151
  }
package/src/styles/components/_details.scss CHANGED
@@ -108,6 +108,23 @@ details {
108
108
  }
109
109
  }
110
110
  }
111
+
112
+ &.subtle,
113
+ .accordion.subtle > & {
114
+ box-shadow: none;
115
+ border: 0;
116
+ padding-inline: var(--space-2xs);
117
+
118
+ summary {
119
+ border-block-end: 0;
120
+ padding: var(--space-2xs);
121
+ padding-inline-start: calc(var(--space-2xs) + 1em);
122
+ }
123
+
124
+ &[open] summary {
125
+ margin-block-end: var(--space-2xs);
126
+ }
127
+ }
111
128
  }
112
129
 
113
130
  .accordion {
package/src/styles/components/_dialog.scss CHANGED
@@ -185,10 +185,10 @@ dialog {
185
185
 
186
186
  &::after {
187
187
  content: "";
188
- width: 1.2em;
189
- height: 1.2em;
188
+ width: 1.8em;
189
+ height: 1.8em;
190
190
  mask-image: #{utils.svg-to-data-url(
191
- '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="black" d="M208.49 191.51a12 12 0 0 1-17 17L128 145l-63.51 63.49a12 12 0 0 1-17-17L111 128L47.51 64.49a12 12 0 0 1 17-17L128 111l63.51-63.52a12 12 0 0 1 17 17L145 128Z"/></svg>'
191
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>'
192
192
  )};
193
193
  mask-size: contain;
194
194
  mask-repeat: no-repeat;
package/src/styles/components/_field.scss CHANGED
@@ -61,13 +61,13 @@
61
61
  color: var(--color-body-text);
62
62
  background-color: white;
63
63
  border: var(--border-s) solid var(--color-outline);
64
- font-size: 0.9em;
64
+ font-size: 1em;
65
65
  padding: var(--field-padding);
66
66
  border-radius: var(--field-radius);
67
67
  transition-duration: 200ms;
68
68
  transition-property: color, box-shadow, border-color;
69
69
  transition-timing-function: ease;
70
- font-family: var(--font-family-ui);
70
+ font-family: var(--font-family-body);
71
71
 
72
72
  @media (prefers-color-scheme: dark) {
73
73
  background-color: black;
@@ -185,7 +185,7 @@
185
185
  &::before {
186
186
  content: "";
187
187
  mask-image: #{utils.svg-to-data-url(
188
- '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#888888" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m37.66 130.34a8 8 0 0 1-11.32 11.32L128 139.31l-26.34 26.35a8 8 0 0 1-11.32-11.32L116.69 128l-26.35-26.34a8 8 0 0 1 11.32-11.32L128 116.69l26.34-26.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></svg>'
188
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z"/></svg>'
189
189
  )};
190
190
  mask-size: contain;
191
191
  mask-repeat: no-repeat;
package/src/styles/components/_layout.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  %flex-layout {
2
- display: flex;
2
+ display: flex !important;
3
3
  gap: var(--space-s);
4
4
 
5
5
  &.densest {
package/src/svg/check-thick.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
3
+ stroke-width="64" d="M416 128L192 384l-96-96" />
4
+ </svg>
package/src/svg/check.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
3
+ stroke-width="32" d="M416 128L192 384l-96-96" />
4
+ </svg>
package/src/svg/dropdown.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
2
+ <path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
3
+ d="m6 9l6 6l6-6" />
4
+ </svg>
package/src/svg/external.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
2
+ <path fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
3
+ d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3" />
4
+ </svg>
package/src/svg/info-thick.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
3
+ stroke-width="64" d="M196 220h64v172" />
4
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10"
5
+ stroke-width="64" d="M187 396h138" />
6
+ <circle cx="253 " cy="118" r="44" />
7
+ </svg>
package/src/svg/info.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
3
+ stroke-width="40" d="M196 220h64v172" />
4
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10"
5
+ stroke-width="40" d="M187 396h138" />
6
+ <path d="M256 160a32 32 0 1132-32 32 32 0 01-32 32z" />
7
+ </svg>
package/src/svg/warning-thick.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
+ <path
3
+ d="M256 80c-8.66 0-16.58 7.36-16 16l8 216a8 8 0 008 8h0a8 8 0 008-8l8-216c.58-8.64-7.34-16-16-16z"
4
+ fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
5
+ stroke-width="64" />
6
+ <circle cx="256" cy="436" r="24" fill="none" stroke="currentColor" stroke-linecap="round"
7
+ stroke-linejoin="round" stroke-width="48" />
8
+ </svg>
package/src/svg/warning.svg ADDED
@@ -0,0 +1,8 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
+ <path
3
+ d="M256 80c-8.66 0-16.58 7.36-16 16l8 216a8 8 0 008 8h0a8 8 0 008-8l8-216c.58-8.64-7.34-16-16-16z"
4
+ fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
5
+ stroke-width="32" />
6
+ <circle cx="256" cy="416" r="16" fill="none" stroke="currentColor" stroke-linecap="round"
7
+ stroke-linejoin="round" stroke-width="32" />
8
+ </svg>
package/src/svg/x-circle.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
+ <path
3
+ d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z" />
4
+ </svg>
package/src/svg/x-thick.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
3
+ stroke-width="64" d="M368 368L144 144M368 144L144 368" />
4
+ </svg>
package/src/svg/x.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
3
+ stroke-width="32" d="M368 368L144 144M368 144L144 368" />
4
+ </svg>