@operato/input 2.0.0-alpha.9 → 2.0.0-alpha.90

package/stories/ox-input-data.stories.ts

@@ -0,0 +1,65 @@
+import '../src/ox-input-data.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-data',
+  component: 'ox-input-data',
+  argTypes: {
+    value: { control: 'text' },
+    name: { control: 'text' },
+    disabled: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: string | number | object
+  disabled?: boolean
+}
+
+const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <style>
+    body {
+    }
+    ox-input-data {
+      height: 300px;
+    }
+  </style>
+
+  <ox-input-data
+    @change=${(e: Event) => {
+      const value = (e.target as HTMLInputElement).value
+      console.log('value : ', value, typeof value)
+    }}
+    name=${name}
+    .value=${value}
+    ?disabled=${disabled}
+  >
+  </ox-input-data>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'data'
+}

package/stories/ox-input-duration.stories.ts

@@ -27,7 +27,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-file.stories.ts

@@ -48,7 +48,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-hashtags.stories.ts

@@ -28,7 +28,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', value = [], disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-i18n-label.stories.ts

@@ -0,0 +1,85 @@
+import '../src/ox-input-i18n-label.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-i18n-label',
+  component: 'ox-input-i18n-label',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'object' },
+    disabled: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+  disabled?: boolean
+}
+
+const Template: Story<ArgTypes> = ({ name = 'values', value, disabled }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-i18n-label
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+    .languages=${[
+      {
+        code: 'ko',
+        display: '한글'
+      },
+      {
+        code: 'en',
+        display: 'English'
+      },
+      {
+        code: 'zh',
+        display: 'Chinese'
+      },
+      {
+        code: 'ja',
+        display: 'Japanese'
+      }
+    ]}
+    ?disabled=${disabled}
+  >
+  </ox-input-i18n-label>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'i18n labels',
+  value: {
+    ko: '한글 코드',
+    en: 'English code',
+    zh: 'Chinese code',
+    ja: 'Japan code'
+  }
+}

package/stories/ox-input-key-values.stories.ts

@@ -28,7 +28,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options = [], disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-mass-fraction.stories.ts

@@ -36,7 +36,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-multiple-colors.stories.ts

@@ -22,7 +22,18 @@ interface ArgTypes {
 }
 
 const Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
   <style>
     body {
@@ -99,15 +110,14 @@ const Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`
       --icon-default-color: var(--theme-white-color);
 
       /* material design component themes */
-      --mdc-theme-on-primary: var(--theme-white-color);
-      --mdc-theme-primary: var(--secondary-text-color);
-      --mdc-theme-on-secondary: var(--theme-white-color);
-      --mdc-theme-secondary: var(--primary-color);
-      --mdc-button-outline-color: var(--primary-color);
-      --mdc-danger-button-primary-color: var(--status-danger-color);
-      --mdc-danger-button-outline-color: var(--status-danger-color);
-      --mdc-button-outline-width: 1px;
-      --mdc-button-horizontal-padding: 16px;
+      --md-theme-on-primary: var(--theme-white-color);
+      --md-theme-primary: var(--secondary-text-color);
+      --md-theme-on-secondary: var(--theme-white-color);
+      --md-theme-secondary: var(--primary-color);
+      --md-button-outline-color: var(--primary-color);
+      --md-danger-button-primary-color: var(--status-danger-color);
+      --md-danger-button-outline-color: var(--status-danger-color);
+      --md-button-outline-width: 1px;
 
       /* button style */
       --button-background-color: #fafbfc;
@@ -151,7 +161,7 @@ const Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`
       --label-color: var(--secondary-color);
       --label-text-transform: capitalize;
       --input-margin: var(--margin-narrow) 0;
-      --input-padding: var(--padding-default);
+      --input-padding: 6px 2px;
       --input-min-width: 200px;
       --input-font: normal var(--fontsize-default) var(--theme-font);
       --input-hint-font: normal var(--fontsize-small) var(--theme-font);

package/stories/ox-input-options.stories.ts

@@ -26,7 +26,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-partition-keys.stories.ts

@@ -26,7 +26,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {}, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-privilege.stories.ts

@@ -33,7 +33,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privileges, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-quantifier.stories.ts

@@ -28,7 +28,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
   <ox-input-quantifier
     name=${name}

package/stories/ox-input-range.stories.ts

@@ -39,7 +39,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
   <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>
   </ox-input-range>

package/stories/ox-input-search.stories.ts

@@ -36,7 +36,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-select-buttons.stories.ts

@@ -36,7 +36,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     ox-input-select-buttons {
       max-width: 400px;

package/stories/ox-input-unit.stories.ts

@@ -68,8 +68,21 @@ const Template: Story<ArgTypes> = ({
   userUnit,
   disabled
 }: ArgTypes) => html`
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <link href="/themes/app-theme.css" rel="stylesheet" />
+
   <ox-input-unit-number
     name=${name}
     placeholder=${placeholder}

package/stories/ox-input-value-map.stories.ts

@@ -36,7 +36,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-value-ranges.stories.ts

@@ -36,7 +36,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-work-shift.stories.ts

@@ -27,7 +27,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'work-shift', value = [], disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-select.stories.ts

@@ -35,7 +35,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
   <div style="height: 300px">
     <ox-select

package/themes/app-theme.css

@@ -124,7 +124,7 @@ body {
   --label-color: var(--secondary-color);
   --label-text-transform: capitalize;
   --input-margin: var(--margin-narrow) 0;
-  --input-padding: var(--padding-default);
+  --input-padding: 6px 2px;
   --input-min-width: 200px;
   --input-font: normal var(--fontsize-default) var(--theme-font);
   --input-hint-font: normal var(--fontsize-small) var(--theme-font);

package/themes/input-theme.css

@@ -1,9 +1,23 @@
 body {
-  --ox-input-border: 1px solid rgba(0, 0, 0, 0.1);
-  --ox-input-border-radius: var(--border-radius);
-  --ox-input-padding: var(--input-padding);
-  --ox-input-font: normal 15px var(--theme-font);
-  --ox-input-color: var(--secondary-color);
+  --input-intra-gap: 7px;
+  --input-border: 1px solid rgba(0, 0, 0, 0.1);
+  --input-border-radius: var(--border-radius);
+  --input-font: normal 15px var(--theme-font);
+  --input-color: var(--secondary-color);
+
+  --ox-checkbox-disabled-opacity: 0.5;
+  --ox-checkbox-border-radius: 4px;
+  --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
+  --ox-checkbox-background-color: #fff;
+  --ox-checkbox-size: 15px;
+  --ox-checkbox-checked-border: 1px solid var(--primary-color);
+  --ox-checkbox-unchecked-border: 1px solid rgba(0, 0, 0, 0.3);
+  --ox-checkbox-checked-background-color: #fff;
+  --ox-checkbox-unchecked-background-color: #fff;
+  --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
+  --ox-checkbox-checked-color: var(--primary-color);
+  --ox-checkbox-label-color: var(--label-color);
+  --ox-checkbox-checked-font-weight: bold;
 }
 
 @media screen and (max-width: 480px) {
@@ -13,7 +27,6 @@ body {
 
 @media (min-width: 481px) and (max-width: 1024px) {
   body {
-    --ox-input-font: normal 16px var(--theme-font);
-    --ox-input-padding: 4px 5px;
+    --input-font: normal 16px var(--theme-font);
   }
 }