Migrate styles from yorkie-ui-old #159
Conversation
WalkthroughThe recent updates enhance the styling framework of the application by introducing SASS for improved CSS organization and maintainability. New files have been created for components like buttons, accordions, and navigation, while existing styles have been refactored to support responsive design and dark mode features. The overall aim is to create a visually appealing and cohesive user interface that adapts seamlessly across various devices. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Styles
participant Components
User->>App: Load Page
App->>Styles: Request Styles
Styles->>Components: Load Component Styles
Components-->>Styles: Return Component Styles
Styles-->>App: Return All Styles
App-->>User: Render Page
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Outside diff range, codebase verification and nitpick comments (15)
styles/components/icon.scss (1)
4-21: Consider using BEM naming conventions for class names.The current class naming structure is clear, but adopting BEM (Block Element Modifier) conventions can enhance readability and maintainability, especially in larger projects.
.icon { &__logo { ... } } .icon--close-s { ... } .icon--arrow-left { ... }styles/components/codeblock_navigator.scss (1)
4-28: Consider using BEM naming conventions for class names.The current class naming structure is clear, but adopting BEM (Block Element Modifier) conventions can enhance readability and maintainability, especially in larger projects.
.codeblock-navigator { &__item { ... } &__item--active { ... } }styles/components/toast.scss (1)
4-33: Consider using BEM naming conventions for class names.The current class naming structure is clear, but adopting BEM (Block Element Modifier) conventions can enhance readability and maintainability, especially in larger projects.
.toast-box { &__icon { ... } }styles/components/accordion.scss (1)
4-60: Consider using BEM naming conventions for class names.The current class naming structure is clear, but adopting BEM (Block Element Modifier) conventions can enhance readability and maintainability, especially in larger projects.
.accordion-list { &__item { ... } &__btn { ... } &__content { ... } &__btn--active { ... } }styles/pages/common_error.scss (1)
33-42: Duplicate mixin usage.The
tabletStartmixin is used twice consecutively for the.error_404class. Consider merging these into a single block for clarity and maintainability.- @include mixins-lib.tabletStart() { - padding-left: variables.$spacing_32; - } - - @include mixins-lib.tabletStart() { - padding-left: variables.$spacing_16; - } + @include mixins-lib.tabletStart() { + padding-left: variables.$spacing_16; + }styles/components/codeblock.scss (3)
4-27: Consider adding comments for clarity.The
.codeblock_boxstyles define positioning and button area styles. Adding comments could improve maintainability by explaining the purpose of specific styles, especially for class modifiers like.is_bash.// Styles for code blocks with bash syntax highlighting
29-38: Optimize for readability and maintainability.The
.codeblockclass includes several properties. Consider grouping related properties (e.g., positioning and padding) together and adding comments to explain the purpose of each group.
40-65: Review commented-out styles.There are commented-out styles within
.token. If these are not needed, consider removing them to keep the code clean. If they might be used later, add a comment explaining their purpose.styles/components/header_service.scss (2)
11-34: Consider adding comments for responsive styles.The
.header_innerclass includes complex responsive styles using media queries and safe area insets. Adding comments could help future developers understand the purpose and conditions for these styles.
206-361: Consider accessibility improvements for mobile menu.The
.menu_list_moclass handles mobile menus. Ensure that the menu is accessible, including keyboard navigation and screen reader support.styles/components/button.scss (2)
440-467: Optimize.btn_topstyles for better performance.The
.btn_topclass is set todisplay: noneby default. Consider using a more performant method to toggle visibility, such as usingvisibility: hiddenandposition: absoluteto keep it out of the document flow..btn_top { - display: none; + visibility: hidden; + position: absolute; @include mixins-lib.tabletStart() { - display: block; + visibility: visible; + position: fixed; bottom: variables.$spacing_72; right: variables.$spacing_24; margin: 0; padding: 0; border: none; background-color: transparent; } }
12-24: Undefined Variables in$palette_grayMapThe variable
$whiteis defined, but the gray variables ($gray-900,$gray-800,$gray-700,$gray-600,$gray-500,$gray-400,$gray-300,$gray-200,$gray-100,$gray-50) are not found invariables.scss. This could lead to undefined variable errors. Please ensure these variables are defined.
$gray-900$gray-800$gray-700$gray-600$gray-500$gray-400$gray-300$gray-200$gray-100$gray-50Analysis chain
Verify variable usage in
$palette_gray.Ensure that all variables used in
$palette_grayare defined invariables. This helps prevent potential undefined variable errors.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify that all variables used in `$palette_gray` are defined in `variables`. # Test: Search for variable definitions. Expect: All variables should be defined. rg --type scss '(\$white|\$gray-900|\$gray-800|\$gray-700|\$gray-600|\$gray-500|\$gray-400|\$gray-300|\$gray-200|\$gray-100|\$gray-50)' styles/base/variables.scssLength of output: 193
Script:
#!/bin/bash # Locate the variables.scss file and search for the definitions of the variables used in `$palette_gray`. # Find the variables.scss file fd 'variables.scss' --exec rg '(\$white|\$gray-900|\$gray-800|\$gray-700|\$gray-600|\$gray-500|\$gray-400|\$gray-300|\$gray-200|\$gray-100|\$gray-50)' {}Length of output: 169
styles/pages/service_main.scss (1)
66-72: Use semantic class names for clarity.The class name
.textis generic and might lead to confusion or conflicts. Consider using a more descriptive name that reflects its purpose or context.styles/pages/service_examples_view.scss (1)
928-941: Use semantic class names for clarity.The class name
.paletteis generic and might lead to confusion or conflicts. Consider using a more descriptive name that reflects its purpose or context.styles/pages/service_documentation.scss (1)
562-565: Ensure.toast_boxstyles align with the design systemThe
.toast_boxstyles do not currently utilize design system variables for properties like spacing or colors. To maintain consistency across the codebase, consider updating these styles to align with the design system standards.
- Review the
.toast_boxstyles instyles/pages/service_documentation.scssand incorporate appropriate design system variables.Analysis chain
Verify consistency in
.toast_box.Ensure that the styles for the toast box are consistent with the design system.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistency in `.toast_box`. # Test: Check for consistent styling with the design system. Expect: Proper alignment with design standards. rg --type scss '@variable spacing|@variable gray' -A 2Length of output: 85
Script:
#!/bin/bash # Description: Verify consistency in `.toast_box`. # Test: Check for consistent styling with the design system by searching for design system variables. rg '@variable spacing|@variable gray' --glob '*.scss' -A 2Length of output: 60
Script:
#!/bin/bash # Description: Search for any variable usage in SCSS files to verify consistency with the design system. rg '\$[a-zA-Z0-9_-]+' --glob '*.scss' -A 2Length of output: 103316
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (34)
- package.json (1 hunks)
- pages/_app.tsx (1 hunks)
- styles/base/_color.scss (1 hunks)
- styles/base/_common.scss (1 hunks)
- styles/base/_font.scss (1 hunks)
- styles/base/_mixins-lib.scss (1 hunks)
- styles/base/_normalize.scss (1 hunks)
- styles/base/_service_common.scss (1 hunks)
- styles/base/_variables.scss (1 hunks)
- styles/components/accordion.scss (1 hunks)
- styles/components/button.scss (1 hunks)
- styles/components/card_list_service.scss (1 hunks)
- styles/components/codeblock.scss (1 hunks)
- styles/components/codeblock_header.scss (1 hunks)
- styles/components/codeblock_navigator.scss (1 hunks)
- styles/components/dropdown.scss (1 hunks)
- styles/components/filter.scss (1 hunks)
- styles/components/footer_service.scss (1 hunks)
- styles/components/grid_list.scss (1 hunks)
- styles/components/header_service.scss (1 hunks)
- styles/components/icon.scss (1 hunks)
- styles/components/index.scss (1 hunks)
- styles/components/mouse_effect.scss (1 hunks)
- styles/components/navigator.scss (1 hunks)
- styles/components/prism.scss (1 hunks)
- styles/components/toast.scss (1 hunks)
- styles/pages/common_community.scss (1 hunks)
- styles/pages/common_error.scss (1 hunks)
- styles/pages/service_documentation.scss (1 hunks)
- styles/pages/service_examples.scss (1 hunks)
- styles/pages/service_examples_view.scss (1 hunks)
- styles/pages/service_main.scss (1 hunks)
- styles/pages/service_product.scss (1 hunks)
- styles/style.scss (1 hunks)
Files skipped from review due to trivial changes (4)
- pages/_app.tsx
- styles/base/_normalize.scss
- styles/components/index.scss
- styles/style.scss
Additional comments not posted (69)
styles/components/icon.scss (1)
1-2: Ensure consistent use of variables and mixins.The file uses
@useto import mixins and variables, which is a good practice. Ensure that all colors, spacings, and other stylings are consistently defined in the variables file to maintain uniformity across components.styles/components/codeblock_navigator.scss (1)
1-2: Ensure consistent use of variables and mixins.The file uses
@useto import mixins and variables, which is a good practice. Ensure that all colors, spacings, and other stylings are consistently defined in the variables file to maintain uniformity across components.styles/components/toast.scss (1)
1-2: Ensure consistent use of variables and mixins.The file uses
@useto import mixins and variables, which is a good practice. Ensure that all colors, spacings, and other stylings are consistently defined in the variables file to maintain uniformity across components.styles/components/accordion.scss (1)
1-2: Ensure consistent use of variables and mixins.The file uses
@useto import mixins and variables, which is a good practice. Ensure that all colors, spacings, and other stylings are consistently defined in the variables file to maintain uniformity across components.package.json (1)
48-48: Dependency Addition Approved.The addition of
"sass": "^1.77.8"to thedevDependenciesis appropriate for enabling SASS support in the project.styles/base/_font.scss (1)
1-103: New Font Styles Approved.The use of SASS features for defining font sizes and families is well-organized. Ensure that the font files specified in the
@font-facedeclarations are available at the specified paths.styles/components/filter.scss (1)
1-101: Filter Component Styles Approved.The use of mixins and variables for responsive design is effective. Ensure that the mixins used (e.g.,
mixins-lib.tabletStart) are correctly defined and available.styles/components/dropdown.scss (1)
1-103: Dropdown Component Styles Approved.The use of SASS for managing dropdown styles is well-structured. Ensure that the mixins and variables used are correctly defined and available.
styles/components/mouse_effect.scss (2)
4-115: Review the use of BEM naming conventions.The file uses BEM-like naming conventions with modifiers such as
is_activeandis_hide. Ensure consistency with the project's naming conventions.Verification successful
BEM Naming Conventions Verified
The modifiers
is_activeandis_hideare used consistently across multiple SCSS files in the project, suggesting adherence to the project's naming conventions. No inconsistencies were found.
- Files using
is_activeandis_hideinclude:
styles/pages/service_main.scssstyles/pages/service_documentation.scssstyles/pages/service_examples_view.scssstyles/components/codeblock_header.scssstyles/components/dropdown.scssstyles/components/navigator.scssstyles/base/_service_common.scssstyles/components/accordion.scssstyles/components/grid_list.scssstyles/components/mouse_effect.scssstyles/components/header_service.scssstyles/components/codeblock_navigator.scssstyles/components/button.scssstyles/components/card_list_service.scssScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistency of BEM naming conventions across the project. # Test: Search for similar naming patterns. Expect: Consistent use of BEM conventions. rg --type scss 'is_active|is_hide' styles/Length of output: 73
Script:
#!/bin/bash # Description: Verify consistency of BEM naming conventions across the project. # Test: Search for similar naming patterns in SCSS files. Expect: Consistent use of BEM conventions. rg 'is_active|is_hide' --glob '*.scss' styles/Length of output: 1960
1-2: Ensure mixins and variables are correctly defined and used.The
@usedirectives formixins-libandvariablesare correctly included. Ensure these files define the necessary mixins and variables used in this file.styles/base/_variables.scss (1)
1-64: Variables are well-organized and provide flexibility.The variables are organized into categories such as fonts, gradients, shadows, spacing, media queries, layout, and z-index. This organization enhances maintainability and flexibility in styling.
styles/components/navigator.scss (2)
1-2: Ensure mixins and variables are correctly defined and used.The
@usedirectives formixins-libandvariablesare correctly included. Ensure these files define the necessary mixins and variables used in this file.
4-121: Review the use of BEM naming conventions.The file uses BEM-like naming conventions with modifiers such as
is_active. Ensure consistency with the project's naming conventions.styles/components/prism.scss (2)
6-136: Use of CSS variables enhances customization.The use of CSS variables for colors allows easy customization and adaptation to different themes, such as dark mode.
1-4: Ensure compatibility with Prism.js theme.The file is based on the Prism.js default theme. Ensure that any customizations maintain compatibility with the original theme.
styles/components/codeblock_header.scss (1)
1-120: LGTM!The use of SASS mixins and variables enhances maintainability and responsiveness. The structure is clear and consistent.
styles/base/_color.scss (1)
1-86: LGTM!The color definitions are comprehensive and well-organized, facilitating easy theming and maintainability.
styles/pages/common_community.scss (1)
1-142: LGTM!The styles are well-structured, using mixins and variables effectively for responsive design and consistent spacing.
styles/pages/service_examples.scss (1)
1-165: LGTM!The use of mixins for responsive design and the inclusion of dark mode styles are well-implemented. The structure is clear and maintainable.
styles/pages/common_error.scss (3)
6-7: Ensure mixin usage consistency.The mixin
setContainerPCis used to set the container dimensions. Ensure that this mixin is consistently applied across similar components for uniformity.
21-26: Responsive design consideration.The use of
tabletStartmixin ensures responsiveness for tablet devices. Verify that this mixin is defined to handle all relevant breakpoints effectively.
63-76: Color variable usage.The color
var(--gray-800)is used for the.titleclass. Ensure that this color provides sufficient contrast for accessibility, especially in dark mode.styles/components/footer_service.scss (3)
15-25: Safe area insets support.The use of
envandconstantfor safe area insets is a good practice for modern devices. Ensure this is tested across different browsers to confirm compatibility.
66-75: Text alignment for single child.The
.copyrightclass adjusts padding and text alignment when it's the only child. Confirm that this logic is consistently applied in similar scenarios.
151-160: Dark mode adjustments.The
.darkmodeclass modifies the logo's color. Ensure that all elements in dark mode are tested for visibility and contrast.styles/components/card_list_service.scss (3)
13-15: Spacing between items.The margin between
.service_card_itemelements is set to16px. Ensure this spacing is consistent with design guidelines.
73-99: Transition effects.The transition effect is applied to
.img_box,.service_card_title, and.service_card_desc. Verify that these transitions are smooth and enhance the user experience.
109-124: Responsive layout for horizon items.The
.horizon_itemclass changes layout on tablets. Ensure this transition maintains visual consistency and usability.styles/components/grid_list.scss (3)
15-27: Responsive grid layout.The grid items adjust their basis and margin based on device size. Ensure this logic is consistent across different breakpoints for a seamless user experience.
50-55: Border styling.The
_cardclass uses a solid border. Confirm that this border style aligns with the overall design language of the application.
139-157: Dashed border for add screen.The
.add_screenclass uses a dashed border. Ensure this visual cue is clear and consistent with user expectations for interactive elements.styles/components/codeblock.scss (3)
1-2: Ensure correct usage of SASS modules.The
@usedirective is correctly used to import SASS modules. Ensure that all variables and mixins from these modules are used appropriately throughout the file.
98-112: Ensure consistent padding across languages.The
.language-jsonand.language-bashclasses have different padding settings. Verify that these differences are intentional and align with design requirements.
115-291: Check compatibility with JSON view libraries.The
.codeblock_tree_boxstyles seem to target a JSON view component. Ensure compatibility with any third-party libraries used and verify that styles do not conflict with default library styles.styles/components/header_service.scss (3)
4-10: Ensure sticky positioning works across browsers.The
.header_serviceusesposition: sticky;. Verify that this works as expected across all target browsers, especially older versions that may not fully support sticky positioning.
101-139: Review navigation styles for consistency.The
.navand.gnbclasses define navigation styles. Ensure that these styles are consistent with other navigation components in the project for a cohesive user experience.
142-204: Ensure utility button visibility and accessibility.The
.header_utilclass manages utility buttons. Verify that these buttons remain accessible and visible across different screen sizes and orientations.styles/base/_common.scss (5)
1-7: Ensure imported modules are necessary.The file imports several SASS modules. Verify that all imported modules are necessary and used within the file to avoid unnecessary dependencies.
8-34: Review global reset styles.The global reset styles remove default margins and paddings. Ensure these resets do not interfere with third-party components that might rely on default styles.
132-267: Ensure color palette matches design specifications.The color palette is defined using SASS maps. Verify that these colors match the design specifications and are used consistently across the project.
321-359: Review layout styles for consistency.The layout styles define basic container properties. Ensure these styles are consistent with other layout components in the project.
362-368: Ensure dimmed background is accessible.The
.dimmedclass uses a semi-transparent background. Verify that this background provides sufficient contrast for accessibility.styles/base/_mixins-lib.scss (4)
6-6: Verify root-em value consistency.The
$root-emvariable is set to 10. Ensure this value is consistent with other measurements in the project to avoid scaling issues.
18-42: Ensure font mixins handle edge cases.The
fontsmixin handles font size, line height, and weight. Verify that it correctly handles edge cases, such as invalid inputs or extreme values.
108-112: Use ellipsis mixin judiciously.The
ellipsismixin enforces single-line text truncation. Ensure it's used only where necessary to avoid cutting off important content.
218-233: Review safe area mixin for compatibility.The
safeAreamixin handles safe area insets. Ensure compatibility with all target browsers and devices, especially those with notch displays.styles/components/button.scss (4)
1-3: Ensure correct usage of SASS modules.The
@usedirective is correctly importing necessary modules, which is a good practice for maintaining modularity and avoiding global scope pollution.
121-227: Ensure consistent use of mixins insetColor.The
setColormixin is well-structured, but ensure that all color ranges are consistently defined in the palette maps to prevent potential issues.
230-438: Review button component styles for responsiveness.The
.btnclass and its variations are well-defined for different sizes and states. Ensure that these styles are tested for responsiveness across different devices.
25-74: Verify variable usage in$palette_color.Ensure that all variables used in
$palette_colorare defined invariables. This helps prevent potential undefined variable errors.styles/pages/service_main.scss (2)
14-15: Verify media query logic.The use of
-70pxin the height calculation within the media query for landscape orientation might be a typographical error. Verify the intended design.
683-692: Ensure dark mode styles are consistent with light mode.The gradient background for
.textin dark mode should be consistent with the design language of the light mode. Review the color choices to ensure they align with the overall theme.styles/pages/service_examples_view.scss (3)
63-73: Check sidebar hiding logic.The margin-left values for
.is_hideseem to be specific and might not account for all viewport sizes. Ensure these values are tested across different devices.
240-325: Ensure consistent spacing and alignment.The spacing and alignment of elements within
.sidebar_bottomand.btn_boxshould be consistent across different screen sizes. Verify that the layout behaves as expected on tablets and mobile devices.
592-623: Improve accessibility with better contrast.Ensure that the text and background colors in
.pin_boxand.pin_listhave sufficient contrast to meet accessibility standards. This is crucial for readability.styles/pages/service_product.scss (5)
73-81: Verify the use of dynamic class naming.The section uses the
$secvariable for dynamic class naming. Ensure that$secis set correctly and doesn't conflict with other styles.Verification successful
Dynamic class naming with
$secis implemented correctly.The
$secvariable is consistently used for section-related styles and is assigned appropriately. No conflicts were found in its usage across the SCSS files.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the `$sec` variable for dynamic class naming. # Test: Search for assignments and usages of `$sec`. Expect: Proper assignment and usage without conflicts. rg --type scss '\$sec' -A 2Length of output: 58
Script:
#!/bin/bash # Description: Verify the usage of the `$sec` variable for dynamic class naming. # Find all .scss files and search for the `$sec` variable. fd -e scss -x rg '\$sec' -A 2 {}Length of output: 644
254-297: Verify flexbox properties in.product_card_list.The section uses flexbox for layout. Ensure that the properties are applied correctly and consistently across different screen sizes.
Verification successful
Flexbox properties in
.product_card_listare correctly applied.The flexbox properties within the
.product_card_listsection are consistently applied, ensuring proper responsive behavior across different screen sizes. The use of media queries and mixins confirms the intended design adjustments. No issues were found.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify flexbox properties in `.product_card_list`. # Test: Check for consistent and correct application of flexbox properties. Expect: Proper usage across the codebase. rg --type scss 'display: flex|flex-basis|flex-direction' -A 2Length of output: 92
Script:
#!/bin/bash # Description: Verify flexbox properties in `.product_card_list`. # Test: Check for consistent and correct application of flexbox properties. Expect: Proper usage across the codebase. rg 'display: flex|flex-basis|flex-direction' --glob '*.scss' -A 2Length of output: 21409
144-155: Check consistency in spacing and font use.Ensure that the spacing and font sizes used here are consistent with the rest of the design system.
Verification successful
Consistency in Spacing and Font Use Verified
The SCSS files contain consistent use of spacing and font-related variables and mixins, such as
$spacing_16,$spacing_32, and@include mixins-lib.rfonts. These are used throughout the codebase, including in the.sub_title_wrapsection, ensuring alignment with the design system. No inconsistencies were found.
- Spacing Variables: Common spacing variables like
$spacing_16and$spacing_32are used consistently across different SCSS files.- Font Mixins: The
@include mixins-lib.rfontsmixin is used to maintain consistent font sizes and line heights.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistency in spacing and font use in `.sub_title_wrap`. # Test: Check for consistent use of spacing and font sizes. Expect: Consistent values across the codebase. rg --type scss '@variable spacing|@mixin rfonts' -A 2Length of output: 84
Script:
#!/bin/bash # Description: Verify consistency in spacing and font use in `.sub_title_wrap`. # Search for spacing-related variables or mixins in SCSS files. rg 'spacing|padding|margin' --glob '*.scss' -A 2 # Search for font-related variables or mixins in SCSS files. rg 'font-size|font-family' --glob '*.scss' -A 2Length of output: 107530
7-49: Ensure mixins and variables are defined.The
.product_pagesection uses several mixins and variables. Verify that all these are defined in the imported files to ensure they work as expected.
491-537: Verify color variable usage in.darkmode.Ensure that all color variables used for dark mode are defined and consistent with the design system.
Verification successful
Color variables in
.darkmodeare correctly defined and used.The color variables for dark mode are defined in
styles/base/_color.scssand used consistently across the stylesheets. The absence ofbase/variables.scssandbase/mixins-lib.scssfiles does not impact the verification as the necessary definitions are found elsewhere.
- Ensure that any changes to color variables are reflected in all relevant stylesheets.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify color variable usage in `.darkmode`. # Test: Check for definitions and consistent usage of color variables. Expect: Proper definitions and usage. rg --type scss '@variable gray' -A 2Length of output: 67
Script:
#!/bin/bash # Description: Find SCSS files and verify color variable usage. # Locate all SCSS files and search for color variable definitions. fd --extension scss --exec rg --no-heading '@(variable|use) .*gray' {}Length of output: 74
Script:
#!/bin/bash # Description: Search for any SCSS variable definitions in the codebase. # Locate all SCSS files and search for any variable definitions. fd --extension scss --exec rg --no-heading '@variable' {}Length of output: 59
Script:
#!/bin/bash # Description: Search for any variable definitions across all relevant file types. # Locate all files that might contain variable definitions and search for them. fd --type f --exec rg --no-heading '@(variable|use|import)' {}Length of output: 2779
Script:
#!/bin/bash # Description: Search for color variable definitions in specific SCSS files. # Locate the `variables` and `mixins-lib` SCSS files and search for color variable definitions. fd --extension scss --exec rg --no-heading 'gray' './base/variables.scss' './base/mixins-lib.scss'Length of output: 31738
styles/pages/service_documentation.scss (4)
136-180: Verify sticky positioning in.pagination.Ensure that the sticky positioning is applied correctly and consistently across different screen sizes.
Verification successful
Sticky positioning is correctly applied in
.pagination.The use of
position: stickyin the.paginationclass ofstyles/pages/service_documentation.scssis consistent with its intended purpose and correctly configured withtopandrightproperties. Other instances in the codebase confirm the pattern's common usage.
styles/pages/service_documentation.scss:.paginationusesposition: stickywithtop: 152px;andright: 0;.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify sticky positioning in `.pagination`. # Test: Check for correct application of sticky positioning. Expect: Proper usage across the codebase. rg --type scss 'position: sticky' -A 2Length of output: 69
Script:
#!/bin/bash # Description: Verify sticky positioning in `.pagination`. # Test: Check for correct application of sticky positioning. Expect: Proper usage across the codebase. rg 'position: sticky' --glob '*.scss' -A 2Length of output: 1065
182-560: Check typography consistency in.section_content_box.Ensure that the typography styles are consistent with the design system and other sections.
Verification successful
Typography in
.section_content_boxis consistent with design standards.The
@mixin rfontsis used consistently throughout the.section_content_boxto manage typography, aligning with the defined parameters for font size, line height, and weight. No inconsistencies were found.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify typography consistency in `.section_content_box`. # Test: Check for consistent use of typography styles. Expect: Consistent values across the codebase. rg --type scss '@mixin rfonts' -A 2Length of output: 66
Script:
#!/bin/bash # Description: Verify typography consistency in `.section_content_box`. # Test: Check for consistent use of typography styles. Expect: Consistent values across the codebase. rg '@mixin rfonts' --glob '**/*.scss' -A 2Length of output: 247
111-134: Check consistency in spacing and flex properties.Ensure that the spacing and flex properties used here are consistent with the rest of the design system.
Verification successful
Consistency in Spacing and Flex Properties Verified
The usage of
flexandspacingproperties in the.sectionclass is consistent with the design system across the codebase. The patterns observed inservice_documentation.scssalign with those in other SCSS files, confirming adherence to the design guidelines.
- Consistent use of
flexproperties.- Consistent use of
variables.$spacingfor padding.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistency in spacing and flex properties in `.section`. # Test: Check for consistent use of spacing and flex properties. Expect: Consistent values across the codebase. rg --type scss '@variable spacing|flex' -A 2Length of output: 75
Script:
#!/bin/bash # Description: Verify consistency in spacing and flex properties in `.section`. # Test: Check for consistent use of spacing and flex properties. rg '@variable spacing|flex' --glob '*.scss' -A 2Length of output: 31436
11-109: Ensure mixins and variables are defined.The
.documentation_pagesection uses several mixins and variables. Verify that all these are defined in the imported files to ensure they work as expected.Verification successful
Mixins and Variables are Defined
The mixins
rfonts,tabletStart, andmobileStartare defined in the codebase. Additionally, the variables related tospacingandgrayare also defined, ensuring that the styles in the.documentation_pagesection are correctly supported by these definitions.
Mixins:
@mixin rfonts@mixin tabletStart@mixin mobileStartVariables:
$spacingseries (e.g.,$spacing_8,$spacing_16, etc.)--grayseries (e.g.,--gray-000,--gray-400, etc.)No further action is needed as all required mixins and variables are properly defined.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the definition of mixins and variables used in the `.documentation_page` section. # Test: Check for definitions of mixins and variables. Expect: Definitions in the imported files. rg --type scss '@mixin tabletStart|@mixin mobileStart|@mixin rfonts|@variable spacing|@variable gray' -A 2Length of output: 137
Script:
#!/bin/bash # Description: Verify the definition of mixins and variables used in the `.documentation_page` section. # Find all SCSS files and search for mixins and variables definitions. fd -e scss -x rg '@mixin tabletStart|@mixin mobileStart|@mixin rfonts|@variable spacing|@variable gray' -A 2 {}Length of output: 425
Script:
#!/bin/bash # Description: Specifically search for the definitions of `spacing` and `gray` variables in SCSS files. fd -e scss -x rg '\$spacing|gray' -A 2 {}Length of output: 43427
styles/base/_service_common.scss (5)
91-172: Check consistency in flex properties and spacing in.top_banner.Ensure that the flex properties and spacing used here are consistent with the rest of the design system.
6-88: Ensure animations and gradients are defined.The
.btn_startsection uses animations and gradients. Verify that all these are defined in the imported files to ensure they work as expected.Verification successful
Animations are properly defined.
The animations
gradient1,gradient2,gradient3,gradient4, andbtn-bgused in the.btn_startsection are all defined within thestyles/base/_service_common.scssfile. This ensures the animations will function as intended.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the definition of animations and gradients used in the `.btn_start` section. # Test: Check for definitions of animations and gradients. Expect: Definitions in the imported files. rg --type scss '@keyframes gradient|@keyframes btn-bg' -A 2Length of output: 90
Script:
#!/bin/bash # Description: Verify the definition of animations and gradients used in the `.btn_start` section. # Test: Check for definitions of animations and gradients. Expect: Definitions in the imported files. rg --type 'scss' '@keyframes gradient|@keyframes btn-bg' -A 2Length of output: 90
Script:
#!/bin/bash # Description: Verify the definition of animations and gradients used in the `.btn_start` section. # Test: Check for definitions of animations and gradients without specifying the file type. rg '@keyframes gradient|@keyframes btn-bg' -A 2Length of output: 900
220-372: Check consistency in spacing and color usage in.header_example.Ensure that the spacing and color usage are consistent with the design system and other sections.
Verification successful
Consistency in spacing and color usage confirmed in
.header_example.The spacing and color variables used in the
.header_exampleclass are consistent with the design system and are applied uniformly across the codebase. No inconsistencies were found.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistency in spacing and color usage in `.header_example`. # Test: Check for consistent use of spacing and color variables. Expect: Consistent values across the codebase. rg --type scss '@variable spacing|@variable gray' -A 2Length of output: 85
Script:
#!/bin/bash # Description: Verify consistency in spacing and color usage in `.header_example`. # Find all SCSS files and search for spacing and color variable usage. fd -e scss -x rg '@variable spacing|@variable gray' -A 2 {}Length of output: 63
Script:
#!/bin/bash # Description: Verify consistency in spacing and color usage in `.header_example`. # Search for specific spacing and color variable usage in SCSS files. fd -e scss -x rg '\$spacing_16|\$spacing_24|--gray-600|--gray-000' -A 2 {}Length of output: 18332
174-218: Verify layout consistency in.codeblock_header.Ensure that the layout and typography are applied consistently across different screen sizes.
Verification successful
Let's adjust the script to search for the
@mixin rfontspattern without specifying the file type to avoid the error.
To ensure the
@mixin rfontsis consistently applied across the codebase, let's search for all instances where it is included.
Consistent Application of Typography Verified
The
@mixin rfontsis consistently applied across the codebase, ensuring uniform typography settings. No issues with its application were found.
- Instances found in multiple files, including
styles/base/_service_common.scss.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify layout consistency in `.codeblock_header`. # Test: Check for consistent application of layout and typography. Expect: Proper usage across the codebase. rg --type scss '@mixin rfonts' -A 2Length of output: 66
Script:
#!/bin/bash # Description: Verify layout consistency in `.codeblock_header`. # Test: Check for consistent application of layout and typography. Expect: Proper usage across the codebase. rg '@mixin rfonts' -A 2Length of output: 228
Script:
#!/bin/bash # Description: Search for all instances of `@include mixins-lib.rfonts` to verify consistent application. rg '@include mixins-lib.rfonts' -A 2Length of output: 24750
375-445: Verify component styling in.dashboard.Ensure that all components within the dashboard are styled consistently and align with the design system.
Verification successful
Component styling in
.dashboardis consistent.The use of predefined spacing and color variables in the
.dashboardsection aligns with the design system, ensuring consistent styling across components.
- Variables like
$spacing_8,$spacing_16, and$whiteare defined instyles/base/_variables.scssand used appropriately.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify component styling in `.dashboard`. # Test: Check for consistent styling of components. Expect: Proper alignment with design standards. rg --type scss '@variable spacing|@variable gray' -A 2Length of output: 85
Script:
#!/bin/bash # Description: Verify component styling in `.dashboard`. # Test: Check for consistent styling of components. Expect: Proper alignment with design standards. # Use `fd` to find SCSS files and then search for variable usage. fd -e scss | xargs rg '@variable spacing|@variable gray' -A 2Length of output: 63
Script:
#!/bin/bash # Description: Verify component styling in `.dashboard`. # Test: Search for SCSS variable definitions and usages related to spacing and colors. # Use `fd` to find SCSS files and then search for variable definitions and usages. fd -e scss | xargs rg '\$spacing|\$gray|\$white' -A 2Length of output: 54062
What this PR does / why we need it?
Currently, all styles are managed in the yorkie-ui-old private repository. This necessitates modifying and deploying from yorkie-ui-old to confirm any style changes, which is inconvenient. This PR aims to move the separated style files into the homepage and dashboard repositories to facilitate easier style management.
Expected Outcomes:
33.2kb-> after19.7kbAny background context you want to provide?
What are the relevant tickets?
Related yorkie-team/dashboard#163
Checklist