feat(component): design system foundation#33
Merged
Conversation
|
Warning Review limit reached
More reviews will be available in 54 minutes and 35 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (11)
📝 WalkthroughWalkthroughThis PR refactors the design system by extracting color and typography themes into modular CSS files, updates Tailwind configuration to import these modules, adds Storybook documentation stories for colors and typography, and updates app components to use the new standardized Tailwind class names. ChangesDesign System Refactor and Documentation
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/archeo/src/components/ActivityLevel.vue`:
- Around line 7-9: In ActivityLevel.vue update the class mapping for level === 2
to use the correct design-system token name: replace the incorrect key
'bg-status-warning-500' with the proper token 'bg-warning-success-500' in the
object that maps background classes based on the level variable so level 2
receives the intended background color.
In `@packages/components/src/assets/colors.css`:
- Around line 32-34: The CSS variables for warning were misnamed as
--color-warning-success-100/500/700 which breaks the --color-status-<name>-*
convention; rename these variables to --color-status-warning-100,
--color-status-warning-500, and --color-status-warning-700 in
packages/components/src/assets/colors.css and update any usages (notably in
packages/components/src/stories/Colors.stories.ts) from bg-warning-success-* to
bg-status-warning-* so components referencing bg-status-warning-500 resolve
correctly.
In `@packages/components/src/assets/main.css`:
- Around line 1-6: Move the local stylesheet imports so they appear before the
Tailwind `@source` directives: relocate `@import` "./colors.css" and `@import`
"./typography.css" above `@source` "../" and `@source` "../stories". This keeps
Tailwind's `@import` "`@import` "tailwindcss";" at the top, preserves Tailwind
behavior, and resolves the Stylelint "invalid position" complaint by ensuring
the local `@import` rules come before the `@source` directives.
In `@packages/components/src/assets/typography.css`:
- Around line 130-138: There are duplicate and mistargeted CSS custom properties
in the data tokens: remove the duplicated --text-data--line-height (one of the
two occurrences) and change the mistargeted --text-data--line-height under the
label block to --text-data-label--line-height so the --text-data-label token
actually receives its line-height; verify the remaining properties (--text-data,
--text-data--letter-spacing, --text-data-label,
--text-data-label--letter-spacing, --text-data-label--font-weight) are correctly
named and not duplicated.
In `@packages/components/src/stories/Colors.stories.ts`:
- Around line 46-48: Update the inconsistent className values for the warning
color entries in Colors.stories.ts: replace the three occurrences of
'bg-warning-success-100', 'bg-warning-success-500', and 'bg-warning-success-700'
(associated with the items named 'Warning 100', 'Warning 500', 'Warning 700')
with the correct status naming pattern 'bg-status-warning-100',
'bg-status-warning-500', and 'bg-status-warning-700' so they match the other
status color prefixes and render correctly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: b516c3d3-42f9-43eb-81eb-c6ace2f20d71
📒 Files selected for processing (11)
apps/archeo/src/components/ActivityLevel.vueapps/archeo/src/components/ActivityList/ActivityTable.vueapps/archeo/src/components/ArcheoMap/ArcheoMapPopover.vueapps/etno/src/views/DetailView.vuepackages/components/.storybook/preview.tspackages/components/src/assets/colors.csspackages/components/src/assets/main.csspackages/components/src/assets/typography.csspackages/components/src/components/molecules/ModalWindow/ModalWindow.vuepackages/components/src/stories/Colors.stories.tspackages/components/src/stories/Typography.stories.ts
mravcak
force-pushed
the
design-system-foundation
branch
from
efa5913 to
7916e63
Compare
mravcak
force-pushed
the
design-system-foundation
branch
from
7916e63 to
8fdeff4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Style
Chores