Skip to content

Stratakit css cleanup #12802

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: sandcastle-v2
Choose a base branch
from
Open

Stratakit css cleanup #12802

wants to merge 10 commits into from

Conversation

jjspace
Copy link
Contributor

@jjspace jjspace commented Aug 6, 2025

Description

This pr tackles a few different things but all focused around Sandcastle's CSS and stratakit

  • Started using the unstable_loadStyles function from stratakit to initialize all css variables from stratakit inside non-react pages
  • Created .stratakit-mimic-* css components to style components in the viewer bucket and standalone pages to match the stratakit styles.
    • The stylesheets in public/styles/stratakit-mimic/components are sourced directly from stratakit with minor changes to the class names to avoid naming conflicts. This was done to reduce duplicated work and make sure we match the styles as close as possible
    • Also added some "base styles" for common semantic elements like <button> to allow matching styles without requiring people to know the classes or html structure
    • This also involved an update to the Sandcastle API to match the new class names and required structure
  • Updated all the existing CSS to utilize stratakit token variables
    • There are a few tokens missing related to the borders. I created an "extension" stylesheet to define these for now and make it easy to swap out later
  • Updated the "Viewerless Sandcastle" I've been using to test to include all commonly expected inputs in the toolbar for easy testing
    • This might turn into a "Sandcastle API" test sandcastle long term

Issue number and link

Part of #12566

Testing plan

  • Run npm run dev from the sandcastle package or npm run build-sandcastle and npm start from the repo root
  • Make sure all page layout and styling still looks correct (to verify variables set up correctly)
  • Make sure inputs in sandcastle toolbars look good
  • Check sandcastles that use the Sandcastle API for inputs
  • Check sandcastles that do not use the Sandcastle API for inputs, both should look good
  • Check the standalone looks good
  • Open a slow loading sandcastle and make sure there is no white flash or anything jarring, both the bucket and standalone pages. I noticed we were having some FOUC issues and tried to address with some embedded styles

Author checklist

  • I have submitted a Contributor License Agreement
  • I have added my name to CONTRIBUTORS.md
  • I have updated CHANGES.md with a short summary of my change
  • I have added or updated unit tests to ensure consistent code coverage
  • I have updated the inline documentation, and included code examples where relevant
  • I have performed a self-review of my code

@jjspace jjspace requested a review from ggetz August 6, 2025 20:44
Copy link

github-actions bot commented Aug 6, 2025

Thank you for the pull request, @jjspace!

✅ We can confirm we have a CLA on file for you.

@jjspace jjspace self-assigned this Aug 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant