fix: padding and bump sugar-high

huozhi · huozhi · commit d02086a84d08 · 2025-02-24T00:36:19.000+01:00
diff --git a/package.json b/package.json
@@ -31,6 +31,6 @@
   },
   "packageManager": "pnpm@9.15.4",
   "dependencies": {
-    "sugar-high": "^0.9.2"
+    "sugar-high": "^0.9.3"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/app/page.tsx b/site/app/page.tsx
@@ -25,7 +25,7 @@ export default async function Page(props: { searchParams: Promise<SearchParams>
             Codice is a simple code editor and code block component for React. 
             It is a zero-dependency library that provides a slim code editor and code block component. <a href='https://github.com/huozhi/codice'>Source Code ↗</a>
           </p>
-          <Code className='code code--default'>
+          <Code className='code-install code-install--bash'>
             {`npm install codice`}
           </Code>
         </div>
diff --git a/site/app/styles.css b/site/app/styles.css
@@ -50,10 +50,11 @@ input[type=radio] {
 .description {
   margin: 2rem 0;
 }
-.description .code {
+.description .code-install {
   border-radius: 8px;
 }
-.code--default {
+.code-install--bash {
+  padding: 0 0.5rem;
   background-color: #242424;
 }
 
diff --git a/src/code/code.test.tsx b/src/code/code.test.tsx
@@ -86,7 +86,7 @@ describe('Code', () => {
         color: var(--codice-code-line-number-color);
       }
       :scope[data-codice-line-numbers="false"] .sh__line {
-        padding-left: 0;
+        padding-left: calc(var(--codice-code-padding) * 0.5);
       }
 
       :scope[data-codice-code] {
@@ -182,7 +182,7 @@ describe('Code', () => {
         color: var(--codice-code-line-number-color);
       }
       :scope[data-codice-line-numbers="false"] .sh__line {
-        padding-left: 0;
+        padding-left: calc(var(--codice-code-padding) * 0.5);
       }
 
       :scope[data-codice-code] {
@@ -315,7 +315,7 @@ describe('Code', () => {
         color: var(--codice-code-line-number-color);
       }
       :scope[data-codice-line-numbers="false"] .sh__line {
-        padding-left: 0;
+        padding-left: calc(var(--codice-code-padding) * 0.5);
       }
 
       :scope[data-codice-code] {
@@ -448,7 +448,7 @@ describe('Code', () => {
         color: var(--codice-code-line-number-color);
       }
       :scope[data-codice-line-numbers="false"] .sh__line {
-        padding-left: 0;
+        padding-left: calc(var(--codice-code-padding) * 0.5);
       }
 
       :scope[data-codice-code] {
@@ -542,7 +542,7 @@ describe('Code', () => {
         color: var(--codice-code-line-number-color);
       }
       :scope[data-codice-line-numbers="false"] .sh__line {
-        padding-left: 0;
+        padding-left: calc(var(--codice-code-padding) * 0.5);
       }
 
       :scope[data-codice-code] {
diff --git a/src/code/css.ts b/src/code/css.ts
@@ -90,7 +90,7 @@ ${L} [data-codice-code-line-number] {
   color: var(--codice-code-line-number-color);
 }
 ${FL} .sh__line {
-  padding-left: 0;
+  padding-left: calc(var(--codice-code-padding) * 0.5);
 }
 `
 
diff --git a/src/editor/css.ts b/src/editor/css.ts
@@ -15,12 +15,15 @@ ${R} {
   justify-content: stretch;
   scrollbar-width: none;
 }
-${R} [data-codice-content] {
-  padding: 0 calc(var(--codice-code-padding) / 2);
-}
 ${R} textarea {
   padding: calc(var(--codice-code-padding) * 0.75) calc(var(--codice-code-padding) * 0.5);
 }
+${R} [data-codice-code] {
+  padding: calc(var(--codice-code-padding) / 2);
+}
+${R}[data-codice-line-numbers="false"] textarea {
+  padding-left: var(--codice-code-padding);
+}
 ${R} code,
 ${R} textarea {
   font-family: var(--codice-font-family);
diff --git a/src/editor/editor.test.tsx b/src/editor/editor.test.tsx
@@ -22,12 +22,15 @@ describe('Code', () => {
         justify-content: stretch;
         scrollbar-width: none;
       }
-      :scope[data-codice-editor] [data-codice-content] {
-        padding: 0 calc(var(--codice-code-padding) / 2);
-      }
       :scope[data-codice-editor] textarea {
         padding: calc(var(--codice-code-padding) * 0.75) calc(var(--codice-code-padding) * 0.5);
       }
+      :scope[data-codice-editor] [data-codice-code] {
+        padding: calc(var(--codice-code-padding) / 2);
+      }
+      :scope[data-codice-editor][data-codice-line-numbers="false"] textarea {
+        padding-left: var(--codice-code-padding);
+      }
       :scope[data-codice-editor] code,
       :scope[data-codice-editor] textarea {
         font-family: var(--codice-font-family);
@@ -195,7 +198,7 @@ describe('Code', () => {
         color: var(--codice-code-line-number-color);
       }
       :scope[data-codice-line-numbers="false"] .sh__line {
-        padding-left: 0;
+        padding-left: calc(var(--codice-code-padding) * 0.5);
       }
 
       :scope[data-codice-code] {
@@ -227,12 +230,15 @@ describe('Code', () => {
         justify-content: stretch;
         scrollbar-width: none;
       }
-      :scope[data-codice-editor] [data-codice-content] {
-        padding: 0 calc(var(--codice-code-padding) / 2);
-      }
       :scope[data-codice-editor] textarea {
         padding: calc(var(--codice-code-padding) * 0.75) calc(var(--codice-code-padding) * 0.5);
       }
+      :scope[data-codice-editor] [data-codice-code] {
+        padding: calc(var(--codice-code-padding) / 2);
+      }
+      :scope[data-codice-editor][data-codice-line-numbers="false"] textarea {
+        padding-left: var(--codice-code-padding);
+      }
       :scope[data-codice-editor] code,
       :scope[data-codice-editor] textarea {
         font-family: var(--codice-font-family);
@@ -400,7 +406,7 @@ describe('Code', () => {
         color: var(--codice-code-line-number-color);
       }
       :scope[data-codice-line-numbers="false"] .sh__line {
-        padding-left: 0;
+        padding-left: calc(var(--codice-code-padding) * 0.5);
       }
 
       :scope[data-codice-code] {
@@ -432,12 +438,15 @@ describe('Code', () => {
         justify-content: stretch;
         scrollbar-width: none;
       }
-      :scope[data-codice-editor] [data-codice-content] {
-        padding: 0 calc(var(--codice-code-padding) / 2);
-      }
       :scope[data-codice-editor] textarea {
         padding: calc(var(--codice-code-padding) * 0.75) calc(var(--codice-code-padding) * 0.5);
       }
+      :scope[data-codice-editor] [data-codice-code] {
+        padding: calc(var(--codice-code-padding) / 2);
+      }
+      :scope[data-codice-editor][data-codice-line-numbers="false"] textarea {
+        padding-left: var(--codice-code-padding);
+      }
       :scope[data-codice-editor] code,
       :scope[data-codice-editor] textarea {
         font-family: var(--codice-font-family);
@@ -568,7 +577,7 @@ describe('Code', () => {
         color: var(--codice-code-line-number-color);
       }
       :scope[data-codice-line-numbers="false"] .sh__line {
-        padding-left: 0;
+        padding-left: calc(var(--codice-code-padding) * 0.5);
       }
 
       :scope[data-codice-code] {

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,6 @@`
`31`	`31`	`},`
`32`	`32`	`"packageManager": "[email protected]",`
`33`	`33`	`"dependencies": {`
`34`		`- "sugar-high": "^0.9.2"`
	`34`	`+ "sugar-high": "^0.9.3"`
`35`	`35`	`}`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,10 +50,11 @@ input[type=radio] {`
`50`	`50`	`.description {`
`51`	`51`	`margin: 2rem 0;`
`52`	`52`	`}`
`53`		`-.description .code {`
	`53`	`+.description .code-install {`
`54`	`54`	`border-radius: 8px;`
`55`	`55`	`}`
`56`		`-.code--default {`
	`56`	`+.code-install--bash {`
	`57`	`+ padding: 0 0.5rem;`
`57`	`58`	`background-color: #242424;`
`58`	`59`	`}`
`59`	`60`
Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ describe('Code', () => {`
`86`	`86`	`color: var(--codice-code-line-number-color);`
`87`	`87`	`}`
`88`	`88`	`:scope[data-codice-line-numbers="false"] .sh__line {`
`89`		`- padding-left: 0;`
	`89`	`+ padding-left: calc(var(--codice-code-padding) * 0.5);`
`90`	`90`	`}`
`91`	`91`
`92`	`92`	`:scope[data-codice-code] {`
`@@ -182,7 +182,7 @@ describe('Code', () => {`
`182`	`182`	`color: var(--codice-code-line-number-color);`
`183`	`183`	`}`
`184`	`184`	`:scope[data-codice-line-numbers="false"] .sh__line {`
`185`		`- padding-left: 0;`
	`185`	`+ padding-left: calc(var(--codice-code-padding) * 0.5);`
`186`	`186`	`}`
`187`	`187`
`188`	`188`	`:scope[data-codice-code] {`
`@@ -315,7 +315,7 @@ describe('Code', () => {`
`315`	`315`	`color: var(--codice-code-line-number-color);`
`316`	`316`	`}`
`317`	`317`	`:scope[data-codice-line-numbers="false"] .sh__line {`
`318`		`- padding-left: 0;`
	`318`	`+ padding-left: calc(var(--codice-code-padding) * 0.5);`
`319`	`319`	`}`
`320`	`320`
`321`	`321`	`:scope[data-codice-code] {`
`@@ -448,7 +448,7 @@ describe('Code', () => {`
`448`	`448`	`color: var(--codice-code-line-number-color);`
`449`	`449`	`}`
`450`	`450`	`:scope[data-codice-line-numbers="false"] .sh__line {`
`451`		`- padding-left: 0;`
	`451`	`+ padding-left: calc(var(--codice-code-padding) * 0.5);`
`452`	`452`	`}`
`453`	`453`
`454`	`454`	`:scope[data-codice-code] {`
`@@ -542,7 +542,7 @@ describe('Code', () => {`
`542`	`542`	`color: var(--codice-code-line-number-color);`
`543`	`543`	`}`
`544`	`544`	`:scope[data-codice-line-numbers="false"] .sh__line {`
`545`		`- padding-left: 0;`
	`545`	`+ padding-left: calc(var(--codice-code-padding) * 0.5);`
`546`	`546`	`}`
`547`	`547`
`548`	`548`	`:scope[data-codice-code] {`
Original file line number	Diff line number	Diff line change
`@@ -90,7 +90,7 @@ ${L} [data-codice-code-line-number] {`
`90`	`90`	`color: var(--codice-code-line-number-color);`
`91`	`91`	`}`
`92`	`92`	`${FL} .sh__line {`
`93`		`- padding-left: 0;`
	`93`	`+ padding-left: calc(var(--codice-code-padding) * 0.5);`
`94`	`94`	`}`
`95`	`95`	`
`96`	`96`