@triptease/stylesheet 1.2.2 → 1.3.0

package/dist/base.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.2.2
+ * @triptease/stylesheet v1.3.0
  */
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
 @import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
@@ -611,6 +611,61 @@ button,
 }
 }
 @layer base{
+@property --input-horizontal-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --input-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #FFFFFF;
+}
+
+@property --input-border-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #C5C8CE;
+}
+
+@property --input-border-width {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1px;
+}
+
+@property --input-color {
+  syntax: '*';
+  inherits: true;
+  initial-value: inherit;
+}
+
+@property --input-height {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 2.5rem;
+}
+
+@property --input-vertical-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --placeholder-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #575157;
+}
+
+@property --input-focus-border-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #5E43C2;
+}
+}
+@layer base{
 
 @property --checkbox-size {
   syntax: '<length>';
@@ -812,7 +867,7 @@ input[type='number'] {
 input[type='number']::-webkit-inner-spin-button {
   position: absolute;
   top: var(--space-scale-0-5);
-  right: var(--input-horizontal-spacing);
+  right: var(--input-horizontal-spacing, var(--space-scale-2));
   height: calc(100% - var(--space-scale-1));
 }
 }
@@ -876,60 +931,110 @@ input[type='radio'] {
 }
 @layer base{
 
-@property --input-horizontal-spacing {
-  syntax: '<length>';
+@property --select-border-color {
+  syntax: '<color>';
   inherits: true;
-  initial-value: 1rem;
+  initial-value: #C5C8CE;
 }
 
-@property --input-background-color {
+@property --select-background-color {
   syntax: '<color>';
   inherits: true;
   initial-value: #FFFFFF;
 }
 
-@property --input-border-color {
+@property --select-hover-background-color {
   syntax: '<color>';
   inherits: true;
-  initial-value: #C5C8CE;
+  initial-value: #F1F2F4;
 }
 
-@property --input-border-width {
+@property --select-min-width {
   syntax: '<length>';
   inherits: true;
-  initial-value: 1px;
+  initial-value: 250px;
 }
 
-@property --input-color {
-  syntax: '*';
-  inherits: true;
-  initial-value: inherit;
-}
-
-@property --input-height {
+@property --select-max-width {
   syntax: '<length>';
   inherits: true;
-  initial-value: 2.5rem;
+  initial-value: 300px;
 }
 
-@property --input-vertical-spacing {
-  syntax: '<length>';
-  inherits: true;
-  initial-value: 0;
-}
+select {
+  align-items: center;
+  background-color: var(--select-background-color);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--border-radius);
+  border-color: var(--select-border-color);
+  color: var(--color-text-400);
+  display: flex;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-200);
+  line-height: 1.3;
+  max-width: var(--select-max-width);
+  min-width: var(--select-min-width);
+  padding: 0.5rem;
 
-@property --placeholder-color {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: #575157;
-}
+  &::picker-icon {
+    content: '';
+    height: 12px;
+    width: 12px;
 
-@property --input-focus-border-color {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: #5E43C2;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentcolor" width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" stroke="currentcolor"/></svg>');
+    background-size: cover;
+    transition: rotate 0.2s allow-discrete;
+  }
+
+  &:open::picker-icon {
+    rotate: -180deg;
+  }
+
+  &:hover {
+    background-color: var(--select-hover-background-color);
+  }
 }
 
+@supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)) {
+  select,
+  ::picker(select) {
+    -webkit-appearance: base-select;
+       -moz-appearance: base-select;
+            appearance: base-select;
+  }
+
+  ::picker(select) {
+    border: 1px solid var(--select-border-color);
+    border-radius: var(--border-radius);
+    top: calc(anchor(bottom) + var(--space-scale-1));
+  }
+
+  option {
+    text-align: left;
+    padding: var(--space-scale-1);
+    font-size: var(--font-size-200);
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-400);
+    line-height: 1.1;
+    box-sizing: border-box;
+  }
+
+  option:is(:hover, :focus) {
+    background-color: var(--select-hover-background-color);
+    outline: none;
+  }
+  option:checked {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-primary-400);
+  }
+
+  option::checkmark {
+    display: none;
+  }
+}
+}
+@layer base{
 input:not([type='checkbox'], [type='radio']),
 textarea {
   -webkit-appearance: none;

package/dist/blocks.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.2.2
+ * @triptease/stylesheet v1.3.0
  */
 /*
   Suppress "invalid at-rule" warnings: @import-glob is a build-time feature

package/dist/compositions.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.2.2
+ * @triptease/stylesheet v1.3.0
  */
 /*
   Suppress "invalid at-rule" warnings: @import-glob is a build-time feature

package/dist/exceptions.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.2.2
+ * @triptease/stylesheet v1.3.0
  */
 /*
   Suppress "invalid at-rule" warnings: @import-glob is a build-time feature

package/dist/triptease.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.2.2
+ * @triptease/stylesheet v1.3.0
  */
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
 @import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
@@ -611,6 +611,61 @@ button,
 }
 }
 @layer base{
+@property --input-horizontal-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --input-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #FFFFFF;
+}
+
+@property --input-border-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #C5C8CE;
+}
+
+@property --input-border-width {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1px;
+}
+
+@property --input-color {
+  syntax: '*';
+  inherits: true;
+  initial-value: inherit;
+}
+
+@property --input-height {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 2.5rem;
+}
+
+@property --input-vertical-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --placeholder-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #575157;
+}
+
+@property --input-focus-border-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #5E43C2;
+}
+}
+@layer base{
 
 @property --checkbox-size {
   syntax: '<length>';
@@ -812,7 +867,7 @@ input[type='number'] {
 input[type='number']::-webkit-inner-spin-button {
   position: absolute;
   top: var(--space-scale-0-5);
-  right: var(--input-horizontal-spacing);
+  right: var(--input-horizontal-spacing, var(--space-scale-2));
   height: calc(100% - var(--space-scale-1));
 }
 }
@@ -876,60 +931,110 @@ input[type='radio'] {
 }
 @layer base{
 
-@property --input-horizontal-spacing {
-  syntax: '<length>';
+@property --select-border-color {
+  syntax: '<color>';
   inherits: true;
-  initial-value: 1rem;
+  initial-value: #C5C8CE;
 }
 
-@property --input-background-color {
+@property --select-background-color {
   syntax: '<color>';
   inherits: true;
   initial-value: #FFFFFF;
 }
 
-@property --input-border-color {
+@property --select-hover-background-color {
   syntax: '<color>';
   inherits: true;
-  initial-value: #C5C8CE;
+  initial-value: #F1F2F4;
 }
 
-@property --input-border-width {
+@property --select-min-width {
   syntax: '<length>';
   inherits: true;
-  initial-value: 1px;
+  initial-value: 250px;
 }
 
-@property --input-color {
-  syntax: '*';
-  inherits: true;
-  initial-value: inherit;
-}
-
-@property --input-height {
+@property --select-max-width {
   syntax: '<length>';
   inherits: true;
-  initial-value: 2.5rem;
+  initial-value: 300px;
 }
 
-@property --input-vertical-spacing {
-  syntax: '<length>';
-  inherits: true;
-  initial-value: 0;
-}
+select {
+  align-items: center;
+  background-color: var(--select-background-color);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--border-radius);
+  border-color: var(--select-border-color);
+  color: var(--color-text-400);
+  display: flex;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-200);
+  line-height: 1.3;
+  max-width: var(--select-max-width);
+  min-width: var(--select-min-width);
+  padding: 0.5rem;
 
-@property --placeholder-color {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: #575157;
-}
+  &::picker-icon {
+    content: '';
+    height: 12px;
+    width: 12px;
 
-@property --input-focus-border-color {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: #5E43C2;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentcolor" width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" stroke="currentcolor"/></svg>');
+    background-size: cover;
+    transition: rotate 0.2s allow-discrete;
+  }
+
+  &:open::picker-icon {
+    rotate: -180deg;
+  }
+
+  &:hover {
+    background-color: var(--select-hover-background-color);
+  }
 }
 
+@supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)) {
+  select,
+  ::picker(select) {
+    -webkit-appearance: base-select;
+       -moz-appearance: base-select;
+            appearance: base-select;
+  }
+
+  ::picker(select) {
+    border: 1px solid var(--select-border-color);
+    border-radius: var(--border-radius);
+    top: calc(anchor(bottom) + var(--space-scale-1));
+  }
+
+  option {
+    text-align: left;
+    padding: var(--space-scale-1);
+    font-size: var(--font-size-200);
+    font-weight: var(--font-weight-normal);
+    color: var(--color-text-400);
+    line-height: 1.1;
+    box-sizing: border-box;
+  }
+
+  option:is(:hover, :focus) {
+    background-color: var(--select-hover-background-color);
+    outline: none;
+  }
+  option:checked {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-primary-400);
+  }
+
+  option::checkmark {
+    display: none;
+  }
+}
+}
+@layer base{
 input:not([type='checkbox'], [type='radio']),
 textarea {
   -webkit-appearance: none;

package/dist/utilities.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.2.2
+ * @triptease/stylesheet v1.3.0
  */
 /*
   Suppress "invalid at-rule" warnings: @import-glob is a build-time feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triptease/stylesheet",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "The stylesheet for the Triptease design system",
   "main": "dist/triptease.css",
   "type": "module",