big update

src/style/common.sass

@@ -0,0 +1,151 @@
+// Layouts.
+.layout
+  @apply flex flex-col h-full
+  @apply min-w-[320px]
+  min-height: 100vh
+  overflow: hidden
+  *
+    @apply text-base
+  main
+    @apply flex flex-col flex-1
+
+  h1
+    @apply text-xl md:text-2xl font-bold
+  h2
+    @apply text-lg md:text-xl font-bold
+  h3
+    @apply text-base md:text-lg font-bold
+  h4
+    @apply text-sm md:text-base font-bold
+
+  p
+    &:not(:last-child)
+      @apply mb-4
+
+  .title
+    @apply mb-4
+
+// Ui.
+.ui
+  &-btn
+    @apply h-[38px] text-base
+    @apply flex justify-center items-center
+    @apply px-2 border
+    > *:not(:last-child)
+      @apply mr-2
+    .label
+      @apply text-base font-normal
+
+  &-field
+    &-wrap
+      .label
+        @apply mb-1
+      .input
+        @apply h-[38px] text-base
+        @apply block w-full border
+        > *
+          @apply w-full h-full px-2 py-2 outline-none
+    .description,
+    .message
+      @apply w-full pl-1 mt-1 text-sm
+
+    &-checkbox
+      @apply mb-4
+      .ui-field-wrap
+        @apply flex items-center justify-start
+        .label
+          @apply mb-0
+        .input
+          @apply w-max order-first mr-2
+          @apply w-[24px] h-[24px] min-w-[24px] min-h-[24px]
+          @apply border rounded
+
+    &-textarea
+      .input
+        @apply h-auto
+        > *
+          @apply min-h-[94px]
+          @apply leading-5
+
+  &-alert
+    @apply relative border
+    &:not(:last-child)
+      @apply mb-2
+    &-close
+      @apply absolute top-0 right-0 p-2
+      .ui-icon
+        @apply cursor-pointer
+    &-content
+      @apply p-3
+
+  &-icon
+    @apply block w-[24px]
+
+  &-card
+    @apply flex flex-col
+    @apply border bg-white
+    &-head
+      @apply pt-3 px-3
+    &-body
+      @apply p-3
+      @apply flex-1
+    &-actions
+      @apply pb-3 px-3
+      @apply flex gap-2
+
+  &-form
+    &-header
+      @apply pb-4
+    &-messages
+      @apply pb-4
+      > *:not(:last-child)
+        @apply mb-2
+    &-body
+      > *:not(:last-child)
+        @apply mb-4
+    &-actions
+      @apply flex items-center pt-4
+      > *:not(:last-child)
+        @apply mr-2
+
+  &-table
+    @apply w-full
+    thead
+      tr
+        th
+          @apply py-2 px-3
+          @apply text-sm text-left
+    tbody
+      tr
+        &:hover
+          @apply bg-light
+        &:not(:first-child)
+          @apply border-t
+        td
+          @apply p-2
+  &-dialog
+    @apply bg-dark/30
+    @apply flex flex-col justify-center items-center
+    @apply z-50
+    position: fixed
+    width: 100%
+    height: 100%
+    top: 0
+    left: 0
+    &:not([open])
+      @apply hidden
+    &-window
+      @apply bg-white text-dark
+      &-header
+        @apply flex items-center justify-between py-2 px-3
+        > .title
+          @apply text-lg font-normal
+        .ui-icon-close
+          @apply w-[30px] h-[30px] p-0 border-0 cursor-pointer
+          &:hover
+            @apply text-dark
+      &-content
+        @apply p-3
+  &-toggle-theme
+    .ui-icon
+      @apply cursor-pointer

src/style/tailwind.sass

@@ -0,0 +1,3 @@
+@tailwind base
+@tailwind components
+@tailwind utilities

src/style/theme.sass

@@ -0,0 +1,59 @@
+// Layouts.
+.layout
+  @apply bg-light/10 text-dark
+  @apply dark:bg-black dark:text-light
+  *
+    @apply border-light dark:border-light/40
+  a
+    @apply text-primary
+
+// body
+//   *
+.ui
+  &-btn,
+  &-alert
+    @apply bg-white
+    &.primary
+      @apply bg-primary border-primary text-white
+    &.accent
+      @apply bg-accent border-accent text-white
+    &.info
+      @apply bg-info border-info text-white
+    &.success
+      @apply bg-success border-success text-white
+    &.warning
+      @apply bg-warning border-warning text-white
+    &.error
+      @apply bg-error border-error text-white
+    &.dark
+      @apply bg-dark border-dark text-white
+    &.light
+      @apply bg-light
+    &:disabled
+      @apply text-white bg-light border-light
+
+  &-field
+    .input > *
+      @apply bg-white dark:bg-white/10 text-dark dark:text-white
+    .description
+      @apply text-dark/50
+    &.error
+      .label,
+      .input,
+      .message
+        @apply text-error border-error
+    &.disabled
+      @apply text-dark/60
+      .input
+        @apply bg-light/10
+  &-btn
+    @apply outline-none
+    &:hover:not(:active)
+      @apply bg-opacity-80
+
+  &-btn,
+  &-alert,
+  &-field .input,
+  &-field .input > *,
+  &-card
+      @apply rounded