srcdev-nuxt-components 0.0.16 → 0.0.18

package/assets/styles/forms/index.css

@@ -0,0 +1,2 @@
+@import './variables/index.css';
+@import './themes/index.css';

package/assets/styles/forms/themes/_error.css

@@ -0,0 +1,63 @@
+:root {
+  [data-form-theme='error'] {
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-border: var(--red-8);
+    --theme-form-input-border-active: var(--red-2);
+    --theme-form-input-border-focus: var(--red-2);
+    --theme-form-input-outline: white;
+    --theme-form-input-outline-active: var(--red-6);
+    --theme-form-input-outline-focus: var(--red-6);
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--red-12), var(--red-2));
+
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--red-12), var(--red-12));
+    --theme-form-checkbox-outline: light-dark(var(--red-1), var(--red-1));
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--red-6);
+    --theme-form-checkbox-symbol: var(--red-12);
+
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--red-12), var(--red-12));
+    --theme-form-radio-outline: light-dark(var(--red-1), var(--red-1));
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--red-6);
+    --theme-form-radio-symbol: var(--red-12);
+
+    --theme-form-range-accent-color: light-dark(var(--red-12), var(--red-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--red-1), var(--red-1));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--red-12), var(--red-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--red-5), var(--red-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--red-12), var(--red-12));
+  }
+
+  [data-btn-theme='error'] {
+    --theme-btn-bg: var(--red-12);
+    --theme-btn-border: var(--red-0);
+    --theme-btn-outline: var(--red-12);
+    --theme-btn-text: var(--red-0);
+
+    --theme-btn-bg-hover: var(--red-0);
+    --theme-btn-border-hover: var(--red-12);
+    --theme-btn-outline-hover: var(--red-0);
+    --theme-btn-text-hover: var(--red-12);
+
+    --theme-btn-bg-focus: var(--red-0);
+    --theme-btn-border-focus: var(--red-12);
+    --theme-btn-outline-focus: var(--red-0);
+    --theme-btn-text-focus: var(--red-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--red-12), var(--red-2));
+  }
+}

package/assets/styles/forms/themes/_ghost.css

@@ -0,0 +1,63 @@
+:root {
+  [data-form-theme='ghost'] {
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-border: var(--gray-8);
+    --theme-form-input-border-active: var(--gray-2);
+    --theme-form-input-border-focus: var(--gray-2);
+    --theme-form-input-outline: white;
+    --theme-form-input-outline-active: var(--gray-6);
+    --theme-form-input-outline-focus: var(--gray-6);
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
+
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--gray-6);
+    --theme-form-checkbox-symbol: var(--gray-12);
+
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--gray-6);
+    --theme-form-radio-symbol: var(--gray-12);
+
+    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
+  }
+
+  [data-btn-theme='ghost'] {
+    --theme-btn-bg: transparent;
+    --theme-btn-border: var(--gray-0);
+    --theme-btn-outline: var(--gray-12);
+    --theme-btn-text: light-dark(var(--gray-12), var(--gray-0));
+
+    --theme-btn-bg-hover: light-dark(var(--gray-2), var(--gray-8));
+    --theme-btn-border-hover: light-dark(var(--gray-12), var(--gray-0));
+    --theme-btn-outline-hover: light-dark(var(--gray-12), var(--gray-0));
+    --theme-btn-text-hover: light-dark(var(--gray-12), var(--gray-0));
+
+    --theme-btn-bg-focus: light-dark(var(--gray-2), var(--gray-8));
+    --theme-btn-border-focus: light-dark(var(--gray-12), var(--gray-0));
+    --theme-btn-outline-focus: light-dark(var(--gray-12), var(--gray-0));
+    --theme-btn-text-focus: light-dark(var(--gray-12), var(--gray-0));
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
+  }
+}

package/assets/styles/forms/themes/_primary.css

@@ -0,0 +1,67 @@
+:root {
+  [data-form-theme='primary'] {
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-border: var(--blue-8);
+    --theme-form-input-border-active: var(--blue-2);
+    --theme-form-input-border-focus: var(--blue-2);
+    --theme-form-input-outline: white;
+    --theme-form-input-outline-active: var(--blue-6);
+    --theme-form-input-outline-focus: var(--blue-6);
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
+
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--blue-12), var(--blue-12));
+    --theme-form-checkbox-outline: light-dark(var(--blue-1), var(--blue-1));
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--blue-6);
+    --theme-form-checkbox-symbol: var(--blue-12);
+
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--blue-12), var(--blue-12));
+    --theme-form-radio-outline: light-dark(var(--blue-1), var(--blue-1));
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--blue-6);
+    --theme-form-radio-symbol: var(--blue-12);
+
+    --theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--blue-12), var(--blue-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--blue-5), var(--blue-5));
+    --theme-checkbox-radio-button-outline-focus: light-dark(var(--blue-12), var(--blue-12));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-shadow: transparent;
+    --theme-checkbox-radio-button-shadow-focus: light-dark(var(--blue-6), var(--blue-1));
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--blue-12), var(--blue-12));
+  }
+
+  [data-btn-theme='primary'] {
+    --theme-btn-bg: var(--blue-12);
+    --theme-btn-border: var(--blue-0);
+    --theme-btn-outline: var(--blue-12);
+    --theme-btn-text: var(--blue-0);
+
+    --theme-btn-bg-hover: var(--blue-0);
+    --theme-btn-border-hover: var(--blue-12);
+    --theme-btn-outline-hover: var(--blue-0);
+    --theme-btn-text-hover: var(--blue-12);
+
+    --theme-btn-bg-focus: var(--blue-0);
+    --theme-btn-border-focus: var(--blue-12);
+    --theme-btn-outline-focus: var(--blue-0);
+    --theme-btn-text-focus: var(--blue-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
+  }
+}

package/assets/styles/forms/themes/_secondary.css

@@ -0,0 +1,63 @@
+:root {
+  [data-form-theme='secondary'] {
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-border: var(--gray-8);
+    --theme-form-input-border-active: var(--gray-2);
+    --theme-form-input-border-focus: var(--gray-2);
+    --theme-form-input-outline: white;
+    --theme-form-input-outline-active: var(--gray-6);
+    --theme-form-input-outline-focus: var(--gray-6);
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
+
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--gray-6);
+    --theme-form-checkbox-symbol: var(--gray-12);
+
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--gray-6);
+    --theme-form-radio-symbol: var(--gray-12);
+
+    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
+  }
+
+  [data-btn-theme='secondary'] {
+    --theme-btn-bg: var(--gray-12);
+    --theme-btn-border: var(--gray-0);
+    --theme-btn-outline: var(--gray-12);
+    --theme-btn-text: var(--gray-0);
+
+    --theme-btn-bg-hover: var(--gray-0);
+    --theme-btn-border-hover: var(--gray-12);
+    --theme-btn-outline-hover: var(--gray-0);
+    --theme-btn-text-hover: var(--gray-12);
+
+    --theme-btn-bg-focus: var(--gray-0);
+    --theme-btn-border-focus: var(--gray-12);
+    --theme-btn-outline-focus: var(--gray-0);
+    --theme-btn-text-focus: var(--gray-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
+  }
+}

package/assets/styles/forms/themes/_success.css

@@ -0,0 +1,63 @@
+:root {
+  [data-form-theme='success'] {
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-border: var(--green-8);
+    --theme-form-input-border-active: var(--green-2);
+    --theme-form-input-border-focus: var(--green-2);
+    --theme-form-input-outline: white;
+    --theme-form-input-outline-active: var(--green-6);
+    --theme-form-input-outline-focus: var(--green-6);
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--green-12), var(--green-2));
+
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--green-12), var(--green-12));
+    --theme-form-checkbox-outline: light-dark(var(--green-1), var(--green-1));
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--green-6);
+    --theme-form-checkbox-symbol: var(--green-12);
+
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--green-12), var(--green-12));
+    --theme-form-radio-outline: light-dark(var(--green-1), var(--green-1));
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--green-6);
+    --theme-form-radio-symbol: var(--green-12);
+
+    --theme-form-range-accent-color: light-dark(var(--green-12), var(--green-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
+  }
+
+  [data-btn-theme='success'] {
+    --theme-btn-bg: var(--green-12);
+    --theme-btn-border: var(--green-0);
+    --theme-btn-outline: var(--green-12);
+    --theme-btn-text: var(--green-0);
+
+    --theme-btn-bg-hover: var(--green-0);
+    --theme-btn-border-hover: var(--green-12);
+    --theme-btn-outline-hover: var(--green-0);
+    --theme-btn-text-hover: var(--green-12);
+
+    --theme-btn-bg-focus: var(--green-0);
+    --theme-btn-border-focus: var(--green-12);
+    --theme-btn-outline-focus: var(--green-0);
+    --theme-btn-text-focus: var(--green-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--green-12), var(--green-2));
+  }
+}

package/assets/styles/forms/themes/_tertiary.css

@@ -0,0 +1,63 @@
+:root {
+  [data-form-theme='tertiary'] {
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-border: var(--gray-8);
+    --theme-form-input-border-active: var(--gray-2);
+    --theme-form-input-border-focus: var(--gray-2);
+    --theme-form-input-outline: white;
+    --theme-form-input-outline-active: var(--gray-6);
+    --theme-form-input-outline-focus: var(--gray-6);
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
+
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--gray-6);
+    --theme-form-checkbox-symbol: var(--gray-12);
+
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--gray-6);
+    --theme-form-radio-symbol: var(--gray-12);
+
+    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
+  }
+
+  [data-btn-theme='tertiary'] {
+    --theme-btn-bg: var(--gray-0);
+    --theme-btn-border: var(--gray-0);
+    --theme-btn-outline: var(--gray-12);
+    --theme-btn-text: var(--gray-12);
+
+    --theme-btn-bg-hover: var(--gray-12);
+    --theme-btn-border-hover: var(--gray-0);
+    --theme-btn-outline-hover: var(--gray-12);
+    --theme-btn-text-hover: var(--gray-0);
+
+    --theme-btn-bg-focus: var(--gray-12);
+    --theme-btn-border-focus: var(--gray-0);
+    --theme-btn-outline-focus: var(--gray-12);
+    --theme-btn-text-focus: var(--gray-0);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
+  }
+}

package/assets/styles/forms/themes/_warning.css

@@ -0,0 +1,63 @@
+:root {
+  [data-form-theme='warning'] {
+    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-input-border: var(--orange-8);
+    --theme-form-input-border-active: var(--orange-2);
+    --theme-form-input-border-focus: var(--orange-2);
+    --theme-form-input-outline: white;
+    --theme-form-input-outline-active: var(--orange-6);
+    --theme-form-input-outline-focus: var(--orange-6);
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--orange-12), var(--orange-2));
+
+    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-checkbox-border: light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-checkbox-outline: light-dark(var(--orange-1), var(--orange-1));
+    --theme-form-checkbox-shadow: transparent;
+    --theme-form-checkbox-shadow-focus: var(--orange-6);
+    --theme-form-checkbox-symbol: var(--orange-12);
+
+    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-radio-border: light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-radio-outline: light-dark(var(--orange-1), var(--orange-1));
+    --theme-form-radio-shadow: transparent;
+    --theme-form-radio-shadow-focus: var(--orange-6);
+    --theme-form-radio-symbol: var(--orange-12);
+
+    --theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
+
+    /*
+    * Checkbox as button
+    **/
+
+    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
+
+    --theme-checkbox-radio-button-border-default: light-dark(var(--orange-12), var(--orange-12));
+    --theme-checkbox-radio-button-border-width: 1px;
+
+    --theme-checkbox-radio-button-outline-default: light-dark(var(--orange-5), var(--orange-5));
+    --theme-checkbox-radio-button-outline-width: 1px;
+
+    --theme-checkbox-radio-button-label-default: light-dark(var(--orange-12), var(--orange-12));
+  }
+
+  [data-btn-theme='warning'] {
+    --theme-btn-bg: var(--orange-12);
+    --theme-btn-border: var(--orange-0);
+    --theme-btn-outline: var(--orange-12);
+    --theme-btn-text: var(--orange-0);
+
+    --theme-btn-bg-hover: var(--orange-0);
+    --theme-btn-border-hover: var(--orange-12);
+    --theme-btn-outline-hover: var(--orange-0);
+    --theme-btn-text-hover: var(--orange-12);
+
+    --theme-btn-bg-focus: var(--orange-0);
+    --theme-btn-border-focus: var(--orange-12);
+    --theme-btn-outline-focus: var(--orange-0);
+    --theme-btn-text-focus: var(--orange-12);
+
+    --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--orange-12), var(--orange-2));
+  }
+}

package/assets/styles/forms/themes/index.css

@@ -0,0 +1,7 @@
+@import './_primary.css';
+@import './_secondary.css';
+@import './_tertiary.css';
+@import './_ghost.css';
+@import './_error.css';
+@import './_success.css';
+@import './_warning.css';

package/assets/styles/forms/variables/_theme.css

@@ -0,0 +1,69 @@
+:root {
+  --font-size: 16px;
+  --line-height: calc((var(--font-size) * 2) - 10px);
+
+  --input-border-radius: 4px;
+  --input-border-width-thin: 1px;
+  --input-border-width-default: 2px;
+  --input-border-width-thick: 3px;
+
+  --input-outline-radius: 4px;
+  --input-outline-width-thin: 1px;
+  --input-outline-width-default: 2px;
+  --input-outline-width-thick: 3px;
+
+  --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
+
+  --theme-error-surface: var(--red-12);
+  --theme-error-text: var(--red-0);
+
+  --theme-form-button-font-size-x-small: 14px;
+  --theme-form-button-font-size-small: 14px;
+  --theme-form-button-font-size-normal: 16px;
+  --theme-form-button-font-size-medium: 18px;
+  --theme-form-button-font-size-large: 20px;
+
+  /*
+  * Button Padding
+  */
+
+  --theme-form-button-padding-block-x-small: 6px;
+  --theme-form-button-padding-block-small: 8px;
+  --theme-form-button-padding-block-normal: 10px;
+  --theme-form-button-padding-block-medium: 12px;
+  --theme-form-button-padding-block-large: 12px;
+
+  --theme-form-button-padding-inline-x-small: 12px;
+  --theme-form-button-padding-inline-small: 16px;
+  --theme-form-button-padding-inline-normal: 20px;
+  --theme-form-button-padding-inline-medium: 22px;
+  --theme-form-button-padding-inline-large: 24px;
+
+  /*
+  * Button Icon Sizes and Gap
+  */
+
+  --theme-form-button-padding-inline-icon-only-x-small: 4px;
+  --theme-form-button-padding-inline-icon-only-small: 6px;
+  --theme-form-button-padding-inline-icon-only-normal: 8px;
+  --theme-form-button-padding-inline-icon-only-medium: 10px;
+  --theme-form-button-padding-inline-icon-only-large: 12px;
+
+  --theme-form-button-padding-block-icon-only-x-small: 4px;
+  --theme-form-button-padding-block-icon-only-small: 4px;
+  --theme-form-button-padding-block-icon-only-normal: 6px;
+  --theme-form-button-padding-block-icon-only-medium: 8px;
+  --theme-form-button-padding-block-icon-only-large: 10px;
+
+  --theme-form-button-icon-size-x-small: 18px;
+  --theme-form-button-icon-size-small: 18px;
+  --theme-form-button-icon-size-normal: 18px;
+  --theme-form-button-icon-size-medium: 20px;
+  --theme-form-button-icon-size-large: 22px;
+
+  --theme-form-button-icon-gap-x-small: var(--theme-form-button-padding-inline-x-small);
+  --theme-form-button-icon-gap-small: var(--theme-form-button-padding-inline-small);
+  --theme-form-button-icon-gap-normal: var(--theme-form-button-padding-inline-normal);
+  --theme-form-button-icon-gap-medium: var(--theme-form-button-padding-inline-medium);
+  --theme-form-button-icon-gap-large: var(--theme-form-button-padding-inline-large);
+}

package/assets/styles/forms/variables/index.css

@@ -0,0 +1 @@
+@import './_theme.css';

package/assets/styles/main.css

@@ -0,0 +1,4 @@
+@import './variables';
+@import './forms';
+@import './utils';
+@import './typography';

package/assets/styles/typography/index.css

@@ -0,0 +1,2 @@
+@import './utils';
+@import './variables';