Fiddle: change export to be all in styles.css and styles.scss

[krishan711]

Description

Screenshots:

Checklist:

• I have updated the CHANGELOG with a summary of my changes
• I have updated the documentation accordingly

[Copilot]

Pull request overview

This PR refactors the package exports to expose both the compiled CSS and source SCSS files as separate import paths, aligning with the broader Kiba theming system migration from component-specific CSS variables to a unified theme variable system.

• Added package.json exports field to enable explicit imports of ./styles.css and ./styles.scss
• Replaced component-specific CSS variables (e.g., --kiba-dropzone-*) with generic Kiba theme variables (e.g., --kiba-color-*, --kiba-border-*)
• Added box-sizing: border-box to the structure layer for consistent sizing behavior

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
package.json	Added exports field mapping styles paths and updated files to include source SCSS for distribution
src/styles.scss	Migrated from component-specific to generic Kiba CSS variables and added box-sizing property

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The CSS custom property --kiba-padding-wide2 has an unclear name. Consider using a more descriptive name like --kiba-padding-horizontal or --kiba-padding-x to better indicate this is the horizontal padding value, making the variable's purpose clearer for users of the theme system.

Suggested change

	padding: var(--kiba-padding-wide, 1em) var(--kiba-padding-wide2, 1.5em);
	padding: var(--kiba-padding-wide, 1em) var(--kiba-padding-horizontal, var(--kiba-padding-wide2, 1.5em));

[Copilot]

The CSS variable name --kiba-color-text-clear90 suggests 90% transparency (10% opacity), but the fallback value rgba(128, 128, 128, 0.25) represents 25% opacity. This inconsistency could confuse theme consumers. Either the variable name should be --kiba-color-text-clear75 or the fallback should be rgba(128, 128, 128, 0.1) to match the naming convention.

Suggested change

	border-color: var(--kiba-color-text-clear90, rgba(128, 128, 128, 0.25));
	border-color: var(--kiba-color-text-clear90, rgba(128, 128, 128, 0.1));

[Copilot]

The CSS variable name --kiba-color-text-clear75 suggests 75% transparency (25% opacity), but the fallback value rgba(128, 128, 128, 0.5) represents 50% opacity. This inconsistency could confuse theme consumers. Either the variable name should be --kiba-color-text-clear50 or the fallback should be rgba(128, 128, 128, 0.25) to match the naming convention.

Suggested change

	color: var(--kiba-color-text-clear75, rgba(128, 128, 128, 0.5));
	color: var(--kiba-color-text-clear75, rgba(128, 128, 128, 0.25));