podo-ui 0.1.46 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.1.46",
+  "version": "0.2.0",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",
@@ -49,4 +49,4 @@
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.0"
   }
-}
+}

package/react/atom/pagination.module.scss

@@ -0,0 +1,61 @@
+@use '../../mixin.scss' as *;
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: s(1);
+}
+
+.pageButton {
+  @include p3;
+  min-width: 32px;
+  height: 32px;
+  padding: s(1) s(2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  color: color(text-action);
+  border: 1px solid transparent;
+  border-radius: r(2);
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+
+  &:hover:not(.active) {
+    background-color: color(default-fill);
+    color: color(text-action-hover);
+  }
+
+  &:active:not(.active) {
+    background-color: color(default-hover);
+  }
+
+  &.active {
+    background-color: color(primary);
+    color: color(primary-reverse);
+    border-color: color(primary);
+    font-weight: 600;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 4px solid color(primary-outline);
+  }
+
+  &:disabled {
+    color: color(text-action-disabled);
+    cursor: not-allowed;
+    background-color: transparent;
+  }
+
+  i {
+    font-size: 16px;
+  }
+}
+
+.pageButtonPlaceholder {
+  min-width: 32px;
+  height: 32px;
+}

package/react/atom/pagination.tsx

@@ -0,0 +1,87 @@
+import styles from './pagination.module.scss';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  maxVisiblePages?: number;
+}
+
+export default function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  maxVisiblePages = 5,
+}: PaginationProps) {
+  const getPageNumbers = () => {
+    const pages: number[] = [];
+    const startPage = Math.floor((currentPage - 1) / maxVisiblePages) * maxVisiblePages + 1;
+    const endPage = Math.min(startPage + maxVisiblePages - 1, totalPages);
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  if (totalPages === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.pagination}>
+      {currentPage > 1 ? (
+        <button
+          onClick={handlePrevious}
+          className={styles.pageButton}
+          aria-label="이전 페이지"
+        >
+          <i className="icon-arrow-left"></i>
+        </button>
+      ) : (
+        <div className={styles.pageButtonPlaceholder} />
+      )}
+
+      {pageNumbers.map((pageNum) => (
+        <button
+          key={pageNum}
+          onClick={() => onPageChange(pageNum)}
+          className={`${styles.pageButton} ${
+            currentPage === pageNum ? styles.active : ''
+          }`}
+          aria-label={`${pageNum}페이지`}
+          aria-current={currentPage === pageNum ? 'page' : undefined}
+        >
+          {pageNum}
+        </button>
+      ))}
+
+      {currentPage < totalPages ? (
+        <button
+          onClick={handleNext}
+          className={styles.pageButton}
+          aria-label="다음 페이지"
+        >
+          <i className="icon-arrow-right"></i>
+        </button>
+      ) : (
+        <div className={styles.pageButtonPlaceholder} />
+      )}
+    </div>
+  );
+}

package/react.ts

@@ -2,6 +2,7 @@ import Input from './react/atom/input';
 import Textarea from './react/atom/textarea';
 import Editor from './react/atom/editor';
 import EditorView from './react/atom/editor-view';
+import Pagination from './react/atom/pagination';
 import Field from './react/molecule/field';
 const Form = {
   Input,
@@ -13,4 +14,4 @@ const Form = {
 
 export default Form;
 
-export { Input, Textarea, Editor, EditorView, Field };
+export { Input, Textarea, Editor, EditorView, Pagination, Field };

package/readme.md

@@ -1,8 +1,8 @@
 # Podo UI 사용 가이드
 
-> SCSS Module 기반 디자인 시스템
-> 설명서 : https://podoui.com
-> 저장소: https://github.com/hada0127/podo-ui
+> SCSS Module 기반 디자인 시스템  
+> 설명서 : https://podoui.com  
+> 저장소: https://github.com/hada0127/podo-ui  
 
 ---
 

package/scss/color/theme.scss

@@ -86,6 +86,98 @@
   --color-text-action-reverse: #ffffff;
 }
 
+/*
+  Auto mode: Follow system preference
+*/
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-mode='light']) {
+    --color-primary: #7c3aed;
+    --color-primary-hover: #8b5cf6;
+    --color-primary-pressed: #7c3aed;
+    --color-primary-focus: #8b5cf6;
+    --color-primary-fill: #111827;
+    --color-primary-reverse: #ffffff;
+    --color-primary-outline: rgba(158, 115, 254, 0.3);
+    --color-default: #34343a;
+    --color-default-hover: #3f3f46;
+    --color-default-pressed: #34343a;
+    --color-default-focus: #3f3f46;
+    --color-default-fill: #34343a;
+    --color-default-reverse: #ffffff;
+    --color-default-outline: rgba(63, 63, 70, 0.3);
+    --color-default-deep: #a1a1aa;
+    --color-default-deep-hover: #d1d1d7;
+    --color-default-deep-pressed: #a1a1aa;
+    --color-default-deep-focus: #d1d1d7;
+    --color-default-deep-fill: #52525b;
+    --color-default-deep-reverse: #2c2c31;
+    --color-default-deep-outline: rgba(209, 209, 215, 0.3);
+    --color-info: #0a73eb;
+    --color-info-hover: #1890ff;
+    --color-info-pressed: #0a73eb;
+    --color-info-focus: #1890ff;
+    --color-info-fill: #1c1c20;
+    --color-info-reverse: #ffffff;
+    --color-info-outline: rgba(24, 144, 255, 0.3);
+    --color-link: #0284c7;
+    --color-link-hover: #0ea5e9;
+    --color-link-pressed: #0284c7;
+    --color-link-focus: #0ea5e9;
+    --color-link-fill: #1c1c20;
+    --color-link-reverse: #ffffff;
+    --color-link-outline: rgba(14, 165, 233, 0.3);
+    --color-success: #0d9488;
+    --color-success-hover: #1bb0a2;
+    --color-success-pressed: #0d9488;
+    --color-success-focus: #1bb0a2;
+    --color-success-fill: #1c1c20;
+    --color-success-reverse: #ffffff;
+    --color-success-outline: rgba(27, 176, 162, 0.3);
+    --color-warning: #e8840f;
+    --color-warning-hover: #f19b0b;
+    --color-warning-pressed: #e8840f;
+    --color-warning-focus: #f19b0b;
+    --color-warning-fill: #1c1c20;
+    --color-warning-reverse: #ffffff;
+    --color-warning-outline: rgba(241, 155, 11, 0.3);
+    --color-danger: #f04646;
+    --color-danger-hover: #f25959;
+    --color-danger-pressed: #f04646;
+    --color-danger-focus: #f25959;
+    --color-danger-fill: #1c1c20;
+    --color-danger-reverse: #ffffff;
+    --color-danger-outline: rgba(242, 89, 89, 0.3);
+    --color-bg-modal: #2c2c31;
+    --color-bg-disabled: #2c2c31;
+    --color-bg-toggle: #52525b;
+    --color-bg-indicator: rgba(255, 255, 255, 0.36);
+    --color-bg-block: rgba(0, 0, 0, 0.09);
+    --color-bg-reverse-wb: #000000;
+    --color-bg-reverse-bw: #ffffff;
+    --color-bg-wt: #ffffff;
+    --color-bg-bk: #000000;
+    --color-bg-elevation: #09090b;
+    --color-bg-elevation-1: #18181b;
+    --color-bg-elevation-2: #242429;
+    --color-bg-elevation-3: #2c2c31;
+    --color-border: #52525b;
+    --color-border-hover: #71717a;
+    --color-border-pressed: #52525b;
+    --color-border-focus: #71717a;
+    --color-border-disabled: rgba(255, 255, 255, 0.09);
+    --color-border-alpha: rgba(255, 255, 255, 0.18);
+    --color-text-header: #f4f4f5;
+    --color-text-body: #e4e4e7;
+    --color-text-sub: #a1a1aa;
+    --color-text-action: #d1d1d7;
+    --color-text-action-hover: #f4f4f5;
+    --color-text-action-pressed: #d1d1d7;
+    --color-text-action-focus: #f4f4f5;
+    --color-text-action-disabled: #52525b;
+    --color-text-action-reverse: #ffffff;
+  }
+}
+
 html[data-color-mode='dark'] {
   /*
     Dark mode colors

package/scss/form/checkbox-radio.scss

@@ -55,6 +55,40 @@ input[type='checkbox']:not(.toggle):indeterminate:disabled::before {
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%205C3%203.89543%203.89543%203%205%203H19C20.1046%203%2021%203.89543%2021%205V19C21%2020.1046%2020.1046%2021%2019%2021H5C3.89543%2021%203%2020.1046%203%2019V5Z%22%20fill%3D%22%23E4E4E7%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%204H19C19.5523%204%2020%204.44772%2020%205V19C20%2019.5523%2019.5523%2020%2019%2020H5C4.44772%2020%204%2019.5523%204%2019V5C4%204.44772%204.44772%204%205%204ZM3%205C3%203.89543%203.89543%203%205%203H19C20.1046%203%2021%203.89543%2021%205V19C21%2020.1046%2020.1046%2021%2019%2021H5C3.89543%2021%203%2020.1046%203%2019V5ZM7.0458%2011.3918C6.71443%2011.3918%206.4458%2011.6605%206.4458%2011.9918C6.4458%2012.3232%206.71443%2012.5918%207.0458%2012.5918H16.9652C17.2966%2012.5918%2017.5652%2012.3232%2017.5652%2011.9918C17.5652%2011.6605%2017.2966%2011.3918%2016.9652%2011.3918H7.0458Z%22%20fill%3D%22black%22%20fill-opacity%3D%220.09%22%2F%3E%3C%2Fsvg%3E');
 }
 
+// Auto mode: Follow system preference
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-mode='light']) {
+    input[type='checkbox']:not(.toggle)::before {
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2025%2025%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3.5%205.40002C3.5%204.29545%204.39543%203.40002%205.5%203.40002H19.5C20.6046%203.40002%2021.5%204.29545%2021.5%205.40002V19.4C21.5%2020.5046%2020.6046%2021.4%2019.5%2021.4H5.5C4.39543%2021.4%203.5%2020.5046%203.5%2019.4V5.40002Z%22%20fill%3D%22%231F1F21%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5%204.40002H5.5C4.94772%204.40002%204.5%204.84774%204.5%205.40002V19.4C4.5%2019.9523%204.94772%2020.4%205.5%2020.4H19.5C20.0523%2020.4%2020.5%2019.9523%2020.5%2019.4V5.40002C20.5%204.84774%2020.0523%204.40002%2019.5%204.40002ZM5.5%203.40002C4.39543%203.40002%203.5%204.29545%203.5%205.40002V19.4C3.5%2020.5046%204.39543%2021.4%205.5%2021.4H19.5C20.6046%2021.4%2021.5%2020.5046%2021.5%2019.4V5.40002C21.5%204.29545%2020.6046%203.40002%2019.5%203.40002H5.5Z%22%20fill%3D%22%23DCDCE0%22%2F%3E%3C%2Fsvg%3E');
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+
+    input[type='checkbox']:not(.toggle):checked::before {
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%205C3%203.89543%203.89543%203%205%203H19C20.1046%203%2021%203.89543%2021%205V19C21%2020.1046%2020.1046%2021%2019%2021H5C3.89543%2021%203%2020.1046%203%2019V5Z%22%20fill%3D%22%231890FF%22%2F%3E%3Cpath%20d%3D%22M10%2016.4L6%2012.4L7.4%2011L10%2013.6L16.6%207L18%208.4L10%2016.4Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+
+    input[type='checkbox']:not(.toggle):disabled::before {
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2025%2025%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3.5%205.5C3.5%204.39543%204.39543%203.5%205.5%203.5H19.5C20.6046%203.5%2021.5%204.39543%2021.5%205.5V19.5C21.5%2020.6046%2020.6046%2021.5%2019.5%2021.5H5.5C4.39543%2021.5%203.5%2020.6046%203.5%2019.5V5.5Z%22%20fill%3D%22%232F2F33%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5%204.5H5.5C4.94772%204.5%204.5%204.94772%204.5%205.5V19.5C4.5%2020.0523%204.94772%2020.5%205.5%2020.5H19.5C20.0523%2020.5%2020.5%2020.0523%2020.5%2019.5V5.5C20.5%204.94772%2020.0523%204.5%2019.5%204.5ZM5.5%203.5C4.39543%203.5%203.5%204.39543%203.5%205.5V19.5C3.5%2020.6046%204.39543%2021.5%205.5%2021.5H19.5C20.6046%2021.5%2021.5%2020.6046%2021.5%2019.5V5.5C21.5%204.39543%2020.6046%203.5%2019.5%203.5H5.5Z%22%20fill%3D%22%23424245%22%2F%3E%3C%2Fsvg%3E');
+      cursor: not-allowed !important;
+    }
+    input[type='checkbox']:not(.toggle):checked:disabled::before {
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2225%22%20viewBox%3D%220%200%2024%2025%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%205.5C3%204.39543%203.89543%203.5%205%203.5H19C20.1046%203.5%2021%204.39543%2021%205.5V19.5C21%2020.6046%2020.1046%2021.5%2019%2021.5H5C3.89543%2021.5%203%2020.6046%203%2019.5V5.5Z%22%20fill%3D%22%234C7295%22%2F%3E%3Cpath%20d%3D%22M10%2016.9L6%2012.9L7.4%2011.5L10%2014.1L16.6%207.5L18%208.9L10%2016.9Z%22%20fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fsvg%3E');
+      cursor: not-allowed !important;
+    }
+
+    input[type='checkbox']:not(.toggle):indeterminate::before {
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2225%22%20viewBox%3D%220%200%2024%2025%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%205.09998C3%203.99541%203.89543%203.09998%205%203.09998H19C20.1046%203.09998%2021%203.99541%2021%205.09998V19.1C21%2020.2046%2020.1046%2021.1%2019%2021.1H5C3.89543%2021.1%203%2020.2046%203%2019.1V5.09998Z%22%20fill%3D%22%231F1F21%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%204.09998H19C19.5523%204.09998%2020%204.5477%2020%205.09998V19.1C20%2019.6523%2019.5523%2020.1%2019%2020.1H5C4.44772%2020.1%204%2019.6523%204%2019.1V5.09998C4%204.5477%204.44772%204.09998%205%204.09998ZM3%205.09998C3%203.99541%203.89543%203.09998%205%203.09998H19C20.1046%203.09998%2021%203.99541%2021%205.09998V19.1C21%2020.2046%2020.1046%2021.1%2019%2021.1H5C3.89543%2021.1%203%2020.2046%203%2019.1V5.09998ZM7.0458%2011.4918C6.71443%2011.4918%206.4458%2011.7605%206.4458%2012.0918C6.4458%2012.4232%206.71443%2012.6918%207.0458%2012.6918H16.9652C17.2966%2012.6918%2017.5652%2012.4232%2017.5652%2012.0918C17.5652%2011.7605%2017.2966%2011.4918%2016.9652%2011.4918H7.0458Z%22%20fill%3D%22%23DCDCE0%22%2F%3E%3C%2Fsvg%3E');
+    }
+
+    input[type='checkbox']:not(.toggle):indeterminate:disabled::before {
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2225%22%20viewBox%3D%220%200%2024%2025%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%205.5C3%204.39543%203.89543%203.5%205%203.5H19C20.1046%203.5%2021%204.39543%2021%205.5V19.5C21%2020.6046%2020.1046%2021.5%2019%2021.5H5C3.89543%2021.5%203%2020.6046%203%2019.5V5.5Z%22%20fill%3D%22%232F2F33%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%204.5H19C19.5523%204.5%2020%204.94772%2020%205.5V19.5C20%2020.0523%2019.5523%2020.5%2019%2020.5H5C4.44772%2020.5%204%2020.0523%204%2019.5V5.5C4%204.94772%204.44772%204.5%205%204.5ZM3%205.5C3%204.39543%203.89543%203.5%205%203.5H19C20.1046%203.5%2021%204.39543%2021%205.5V19.5C21%2020.6046%2020.1046%2021.5%2019%2021.5H5C3.89543%2021.5%203%2020.6046%203%2019.5V5.5ZM7.0458%2011.8918C6.71443%2011.8918%206.4458%2012.1605%206.4458%2012.4918C6.4458%2012.8232%206.71443%2013.0918%207.0458%2013.0918H16.9652C17.2966%2013.0918%2017.5652%2012.8232%2017.5652%2012.4918C17.5652%2012.1605%2017.2966%2011.8918%2016.9652%2011.8918H7.0458Z%22%20fill%3D%22%23424245%22%2F%3E%3C%2Fsvg%3E');
+    }
+  }
+}
+
 // 다크모드
 html[data-color-mode='dark'] {
   input[type='checkbox']:not(.toggle)::before {
@@ -110,6 +144,20 @@ input[type='radio']:checked:disabled::before {
   cursor: not-allowed !important;
 }
 
+// Auto mode: Follow system preference
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-mode='light']) {
+    input[type='radio']:disabled::before {
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20fill%3D%22%232F2F33%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2020C16.4183%2020%2020%2016.4183%2020%2012C20%207.58172%2016.4183%204%2012%204C7.58172%204%204%207.58172%204%2012C4%2016.4183%207.58172%2020%2012%2020ZM12%2021C16.9706%2021%2021%2016.9706%2021%2012C21%207.02944%2016.9706%203%2012%203C7.02944%203%203%207.02944%203%2012C3%2016.9706%207.02944%2021%2012%2021Z%22%20fill%3D%22%23424245%22%2F%3E%3C%2Fsvg%3E');
+      cursor: not-allowed !important;
+    }
+    input[type='radio']:checked:disabled::before {
+      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20fill%3D%22black%22%20fill-opacity%3D%220.09%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2020C7.58172%2020%204%2016.4183%204%2012C4%207.58172%207.58172%204%2012%204C16.4183%204%2020%207.58172%2020%2012C20%2016.4183%2016.4183%2020%2012%2020ZM3%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012ZM12%2017C14.7614%2017%2017%2014.7614%2017%2012C17%209.23858%2014.7614%207%2012%207C9.23858%207%207%209.23858%207%2012C7%2014.7614%209.23858%2017%2012%2017Z%22%20fill%3D%22%234C7295%22%2F%3E%3C%2Fsvg%3E');
+      cursor: not-allowed !important;
+    }
+  }
+}
+
 // 다크모드
 html[data-color-mode='dark'] {
   input[type='radio']:disabled::before {

package/scss/form/toggle.scss

@@ -53,6 +53,22 @@
     outline: 4px solid color('primary-outline');
   }
 }
+
+// Auto mode: Follow system preference
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-mode='light']) {
+    .toggle {
+      &:checked:disabled {
+        background-color: #4c7295;
+        cursor: not-allowed !important;
+      }
+      &:checked:disabled::before {
+        background-color: #d9d9d9;
+      }
+    }
+  }
+}
+
 // 다크모드
 html[data-color-mode='dark'] {
   .toggle {

package/scss/layout/bg-elevation.scss

@@ -41,6 +41,20 @@ $shadow: (
   }
 }
 
+// Auto mode: Follow system preference
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-mode='light']) {
+    .bg-elevation {
+      &-2 {
+        box-shadow: none;
+      }
+      &-3 {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
 html[data-color-mode='dark'] {
   .bg-elevation {
     &-2 {

package/scss/reset.scss

@@ -25,6 +25,8 @@ body {
   overflow-wrap: break-word;
   -moz-tab-size: 4;
   tab-size: 4;
+  overflow-x: hidden;
+  max-width: 100%;
 }
 img,
 picture,

package/.prettierignore

@@ -1,9 +0,0 @@
-.DS_Store
-node_modules
-/build
-/package
-.env
-.env.*
-!.env.example
-
-package-lock.json

package/.prettierrc

@@ -1,8 +0,0 @@
-{
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "printWidth": 80
-}