feat(tokens): enable responsiveLayoutMargin token in ResponsiveLayout#1644
Closed
Marcosld wants to merge 5 commits into
Closed
feat(tokens): enable responsiveLayoutMargin token in ResponsiveLayout#1644Marcosld wants to merge 5 commits into
Marcosld wants to merge 5 commits into
Conversation
…t, defaults
- Exports `ResponsiveMarginValues` type `{mobile, tablet, desktop, largeDesktop}`
from `src/skins/types/index.tsx`
- Adds `responsiveLayoutMargin: ResponsiveMarginValues` (required) to `SpacingConfig`
- Fixes `ToThemeTokens` conditional to use `keyof T extends 'mobile' | 'desktop'`
so four-key objects expand to per-key CSS vars instead of collapsing to a string
- Adds `responsiveLayoutMargin` contract entry to `skin-contract.css.ts`
- Seeds `defaultSpacing` in `defaults.tsx` with 16/32/48/64
Refs #1611
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…vars - Merges `defaultSpacing` with `theme.skin.spacing` so skins that don't yet include `responsiveLayoutMargin` still get the default values - Adds a `'largeDesktop' in values` guard in both `spacingDesktopVars` and `spacingMobileVars` to emit all four breakpoint vars directly, bypassing the top/right/bottom/left path used by padding tokens Refs #1611 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces the four hardcoded pixel constants in `marginValue` with `skinVars.spacing.responsiveLayoutMargin.*` CSS var references. The `extraLargeDesktop` centring formula and the exported numeric constants (used by `sheet-common.tsx`) are unchanged. Refs #1611 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…import script The mistica-design token JSON includes `extraLargeDesktop: "auto"` in `responsiveLayoutMargin.value`. This field is a CSS semantic (use the centring formula) and must not be emitted as a skin value — it would break the `ResponsiveMarginValues` TypeScript type. Strip it when generating skin files; the formula stays hardcoded in responsive-layout.css.ts. Refs #1611 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Runs the generate-design-tokens script against branch
2648-responsive-layout-update-app-50-vivo-new to regenerate all known
skin files with the new responsiveLayoutMargin token and 15 new color
tokens (backgroundSelected*, buttonLinkNeutral*, textLinkNeutral*).
- All 10 generated skins now include responsiveLayoutMargin: {mobile: 16,
tablet: 32, desktop: 48, largeDesktop: 64}
- skin-contract.css.ts updated with 15 new color token entries
- cyber-skin.tsx updated manually with responsiveLayoutMargin and 15 new
color tokens
Closes #1611
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Size stats
|
|
Deploy preview for mistica-web ready!
Deployed with vercel-action |
|
Accessibility report ℹ️ You can run this locally by executing |
Contributor
Author
|
Closing — reverting implementation to rethink approach. |
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
1 participant
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
responsiveLayoutMargindesign token (from mistica-design#2662) soResponsiveLayoutside margins can vary per brand instead of using hardcoded pixel constantsgenerate-design-tokensscriptcyber-skin.tsxmanually with the new token valuesChanges
Type system (
SpacingConfig):ResponsiveMarginValuestype{mobile, tablet, desktop, largeDesktop}: numberresponsiveLayoutMargin: ResponsiveMarginValuestoSpacingConfigToThemeTokensconditional to usekeyof T extends 'mobile' | 'desktop'so four-key objects expand to individual CSS vars instead of collapsing to a single var (old check used structural subtyping which matched any superset of{mobile, desktop})Skin contract:
spacing.responsiveLayoutMargincontract entry with four CSS varsbackgroundSelected*,buttonLinkNeutral*,textLinkNeutral*) that arrived with the same mistica-design PRTheme infrastructure:
ThemeContextProvidernow mergesdefaultSpacingwiththeme.skin.spacing(was??) so partial skin spacing always falls back to defaults'largeDesktop' in valuesguard in both spacing var memos to emit all four breakpoint vars directlyResponsiveLayout CSS:
marginValue.{mobile,tablet,desktop,largeDesktop}now reference the skin CSS vars;extraLargeDesktopkeeps its existingcalc((100vw - 1704px) / 2)centring formula; hardcoded numeric constants remain exported forsheet-common.tsxImport script:
extraLargeDesktop: "auto"fromresponsiveLayoutMarginwhen generating skin files (it is a CSS semantic, not a pixel value)Skin files:
generate-design-tokensagainst mistica-design branch2648-responsive-layout-update-app-50-vivo-newTest plan
yarn tsc --noEmitexits 0ResponsiveLayoutmargins at each breakpoint for Movistar and Blau skins in StorybookCloses #1611
🤖 Generated with Claude Code