@triptease/stylesheet 1.1.1 → 1.2.0

package/dist/base.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.1.1
+ * @triptease/stylesheet v1.2.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);
@@ -272,6 +272,72 @@ button {
 /* noinspection CssInvalidAtRule */
 @layer base{
 
+@property --button-height {
+  syntax: '*';
+  inherits: true;
+  initial-value: max-content;
+}
+
+@property --button-vertical-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.5rem;
+}
+
+@property --button-horizontal-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.75rem;
+}
+
+@property --button-border {
+  syntax: '*';
+  inherits: true;
+  initial-value: none;
+}
+
+@property --button-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --button-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #0D0C0D;
+}
+
+@property --button-hover-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --button-hover-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #0D0C0D;
+}
+
+@property --button-focus-outline-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: rgba(1, 150, 237, 0.24);
+}
+
+@property --spinner-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #5E43C2;
+}
+
+@property --color-border {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #C5C8CE;
+}
+
 button,
 .button {
     -webkit-appearance: none;
@@ -540,6 +606,66 @@ button,
 }
 @layer base{
 
+@property --checkbox-size {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --toggle-width {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 3.5rem;
+}
+
+@property --toggle-height {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1.75rem;
+}
+
+@property --toggle-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #75767E;
+}
+
+@property --toggle-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #B5B0B5;
+}
+
+@property --toggle-transition-speed {
+  syntax: '<time>';
+  inherits: true;
+  initial-value: 0.25s;
+}
+
+@property --toggle-border-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --toggle-border-width {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --toggle-hover-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #575157;
+}
+
+@property --toggle-hover-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #1C1B27;
+}
+
 input[type='checkbox'] {
   accent-color: var(--color-primary-400);
   width: var(--checkbox-size, var(--space-scale-2));
@@ -677,6 +803,19 @@ input[type='number']::-webkit-inner-spin-button {
 }
 }
 @layer base{
+
+@property --radio-size {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --radio-accent-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #5E43C2;
+}
+
 input[type='radio'] {
   --radio-size: var(--space-scale-2);
   --radio-accent-color: var(--color-primary-400);
@@ -724,11 +863,59 @@ input[type='radio'] {
 @layer base{
 
 @property --input-horizontal-spacing {
-  syntax: '*';
+  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;
+}
+
 input:not([type='checkbox'], [type='radio']),
 textarea {
   -webkit-appearance: none;

package/dist/blocks.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.1.1
+ * @triptease/stylesheet v1.2.0
  */
 /*
   Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -70,6 +70,18 @@
 
 @layer blocks {
 
+@property --card-padding {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1.5rem;
+}
+
+@property --card-vertical-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.5rem;
+}
+
 .card,
 .card-dataview {
   border-radius: var(--border-radius-100);
@@ -155,6 +167,19 @@ header[data-theme='top-nav'] {
 }
 
 @layer blocks {
+
+@property --tag-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #FFFFFF;
+}
+
+@property --tag-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #0D0C0D;
+}
+
 .status {
   --tag-background-color: var(--color-surface-100);
   --tag-color: var(--color-text-500);

package/dist/compositions.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.1.1
+ * @triptease/stylesheet v1.2.0
  */
 /*
   Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -10,6 +10,12 @@
 
 @layer compositions {
 
+@property --column-vertical-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.5rem;
+}
+
 [class^='column'] {
   display: flex;
   flex-direction: column;
@@ -65,8 +71,8 @@
 
 @property --stack-vertical-spacing {
   syntax: '<length>';
-  initial-value: var(--space-scale-1);
   inherits: false;
+  initial-value: 0.5rem;
 }
 
 [class^='stack'] > * + * {

package/dist/exceptions.css

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

package/dist/triptease.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.1.1
+ * @triptease/stylesheet v1.2.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);
@@ -272,6 +272,72 @@ button {
 /* noinspection CssInvalidAtRule */
 @layer base{
 
+@property --button-height {
+  syntax: '*';
+  inherits: true;
+  initial-value: max-content;
+}
+
+@property --button-vertical-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.5rem;
+}
+
+@property --button-horizontal-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.75rem;
+}
+
+@property --button-border {
+  syntax: '*';
+  inherits: true;
+  initial-value: none;
+}
+
+@property --button-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --button-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #0D0C0D;
+}
+
+@property --button-hover-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --button-hover-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #0D0C0D;
+}
+
+@property --button-focus-outline-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: rgba(1, 150, 237, 0.24);
+}
+
+@property --spinner-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #5E43C2;
+}
+
+@property --color-border {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #C5C8CE;
+}
+
 button,
 .button {
     -webkit-appearance: none;
@@ -540,6 +606,66 @@ button,
 }
 @layer base{
 
+@property --checkbox-size {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --toggle-width {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 3.5rem;
+}
+
+@property --toggle-height {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1.75rem;
+}
+
+@property --toggle-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #75767E;
+}
+
+@property --toggle-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #B5B0B5;
+}
+
+@property --toggle-transition-speed {
+  syntax: '<time>';
+  inherits: true;
+  initial-value: 0.25s;
+}
+
+@property --toggle-border-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --toggle-border-width {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --toggle-hover-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #575157;
+}
+
+@property --toggle-hover-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #1C1B27;
+}
+
 input[type='checkbox'] {
   accent-color: var(--color-primary-400);
   width: var(--checkbox-size, var(--space-scale-2));
@@ -677,6 +803,19 @@ input[type='number']::-webkit-inner-spin-button {
 }
 }
 @layer base{
+
+@property --radio-size {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --radio-accent-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #5E43C2;
+}
+
 input[type='radio'] {
   --radio-size: var(--space-scale-2);
   --radio-accent-color: var(--color-primary-400);
@@ -724,11 +863,59 @@ input[type='radio'] {
 @layer base{
 
 @property --input-horizontal-spacing {
-  syntax: '*';
+  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;
+}
+
 input:not([type='checkbox'], [type='radio']),
 textarea {
   -webkit-appearance: none;
@@ -925,6 +1112,18 @@ body {
 }
 @layer blocks{
 
+@property --card-padding {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1.5rem;
+}
+
+@property --card-vertical-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.5rem;
+}
+
 .card,
 .card-dataview {
   border-radius: var(--border-radius-100);
@@ -1008,6 +1207,19 @@ header[data-theme='top-nav'] {
 }
 }
 @layer blocks{
+
+@property --tag-background-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #FFFFFF;
+}
+
+@property --tag-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #0D0C0D;
+}
+
 .status {
   --tag-background-color: var(--color-surface-100);
   --tag-color: var(--color-text-500);
@@ -1068,6 +1280,12 @@ tfoot {
 /* noinspection CssInvalidAtRule */
 @layer compositions{
 
+@property --column-vertical-spacing {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.5rem;
+}
+
 [class^='column'] {
   display: flex;
   flex-direction: column;
@@ -1122,8 +1340,8 @@ tfoot {
 
 @property --stack-vertical-spacing {
   syntax: '<length>';
-  initial-value: var(--space-scale-1);
   inherits: false;
+  initial-value: 0.5rem;
 }
 
 [class^='stack'] > * + * {

package/dist/utilities.css

@@ -1,5 +1,5 @@
 /*
- * @triptease/stylesheet v1.1.1
+ * @triptease/stylesheet v1.2.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.1.1",
+  "version": "1.2.0",
   "description": "The stylesheet for the Triptease design system",
   "main": "dist/triptease.css",
   "type": "module",
@@ -12,6 +12,7 @@
     ".": "./dist/triptease.css"
   },
   "devDependencies": {
+    "@csstools/postcss-design-tokens": "^4.0.5",
     "autoprefixer": "^10.4.20",
     "concurrently": "^9.1.0",
     "lit": "^3.3.0",