Skip to content
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

fix(documentation, styles): replace broken css variables with hex values #4446

Merged
merged 16 commits into from
Jan 23, 2025

Conversation

leagrdv
Copy link
Contributor

@leagrdv leagrdv commented Jan 15, 2025

No description provided.

@leagrdv leagrdv requested review from a team as code owners January 15, 2025 16:04
@leagrdv leagrdv linked an issue Jan 15, 2025 that may be closed by this pull request
Copy link

changeset-bot bot commented Jan 15, 2025

🦋 Changeset detected

Latest commit: d754f0e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages
Name Type
@swisspost/design-system-styles-primeng Patch
@swisspost/design-system-documentation Patch
@swisspost/design-system-components Patch
@swisspost/design-system-styles Patch
@swisspost/design-system-components-angular-workspace Patch
@swisspost/design-system-components-react Patch
@swisspost/design-system-components-angular Patch
@swisspost/internet-header Patch
@swisspost/design-system-intranet-header-workspace Patch
@swisspost/design-system-nextjs-integration Patch
@swisspost/design-system-styles-primeng-workspace Patch
@swisspost/design-system-intranet-header Patch
@swisspost/design-system-intranet-header-showcase Patch
@swisspost/design-system-tokens Patch
@swisspost/design-system-icons Patch
@swisspost/design-system-migrations Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@swisspost-bot
Copy link
Contributor

swisspost-bot commented Jan 15, 2025

Related Previews

Copy link
Contributor

@oliverschuerch oliverschuerch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be a good idea to add sass variables instead of switching everything to hard-coded values. At least for all the white and black values.
What do you think, should we discuss this in the daily or in the DEV-Roundtable?

@leagrdv
Copy link
Contributor Author

leagrdv commented Jan 21, 2025

Could be a good idea to add sass variables instead of switching everything to hard-coded values. At least for all the white and black values. What do you think, should we discuss this in the daily or in the DEV-Roundtable?

I replaced the hex values with sass variables in the docs. For the components and styles I used the core tokens (for black and white) - though those are temporary and will eventually be changed later when the components are updated with the new design.

Copy link
Contributor

@oliverschuerch oliverschuerch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, never ever use core tokens anywhere!

For the current PR I'd like to use our existing sass color variables, wherever we already import either the core.scss or the variables/color.scss file anyway.
This will allow us to find a solution how to replace them all, when we will get rid of the sass variables in the future.

By the way, we also have some color variables for black-alpha and white-alpha colors:
https://github.com/swisspost/design-system/blob/main/packages/styles/src/variables/_color.scss

I've just added some examples in my review to show you what I mean, please update the rest accordingly...

@leagrdv leagrdv merged commit c1ba9db into main Jan 23, 2025
10 checks passed
@leagrdv leagrdv deleted the 4406-bug-documentation-uses-non-existent-css-variables branch January 23, 2025 16:16
gfellerph pushed a commit that referenced this pull request Jan 27, 2025
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`main` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `main`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @swisspost/[email protected]

### Major Changes

- Removed the Bootstrap `.text-bg-*` and `.link-*` helper classes. (by
[@leagrdv](https://github.com/leagrdv) with
[#4448](#4448))

### Minor Changes

- Add `interpolate-size: allow-keyword` for all supporting browsers,
enabling transitions from and to `height: auto`
(<https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size>)
(by [@gfellerph](https://github.com/gfellerph) with
[#4524](#4524))

### Patch Changes

- Added media mixins to mixin/index.scss to include them in the core
file. (by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4351](#4351))

- Replaced previously deleted CSS variables with SASS variables. (by
[@leagrdv](https://github.com/leagrdv) with
[#4446](#4446))

- Refactored hover styling for links in `<post-footer>` to ensure they
are underlined, aligning with the design specifications in Figma. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4510](#4510))

- Got rid of the page wide yellow background as it can cause yellow
flashing between page loads (by
[@gfellerph](https://github.com/gfellerph) with
[#4523](#4523))

- Fixed display of `post-megadropdown` in header. (by
[@leagrdv](https://github.com/leagrdv) with
[#4350](#4350))

- Corrected high contrast mode styles for `checkbox` and `radio-button`.
(by [@schaertim](https://github.com/schaertim) with
[#4334](#4334))

## @swisspost/[email protected]

### Minor Changes

- Added icons number 1041, 2204, 2642 and 8020. (by
[@myrta2302](https://github.com/myrta2302) with
[#4480](#4480))

- Added icons number 2634, 2635, 2635, 2637, 2638, 2639, 2640 and 2641.
(by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4481](#4481))

### Patch Changes

- Fixed UI-Icon source file names. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4351](#4351))

## @swisspost/[email protected]

### Patch Changes

- Replaced previously deleted CSS variables with SASS variables. (by
[@leagrdv](https://github.com/leagrdv) with
[#4446](#4446))

- Added shadow to an optional tooltip arrow for `post-popover`
component. (by [@alionazherdetska](https://github.com/alionazherdetska)
with [#4441](#4441))

- Fixed `post-icon` calculated base href. (by
[@leagrdv](https://github.com/leagrdv) with
[#4491](#4491))

- Fixed display of `post-megadropdown` in header. (by
[@leagrdv](https://github.com/leagrdv) with
[#4350](#4350))

- Fixed the way the icon url gets generated in the `post-icon`
component. (by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4351](#4351))

-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

- Replaced previously deleted CSS variables with SASS variables. (by
[@leagrdv](https://github.com/leagrdv) with
[#4446](#4446))
-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]



## @swisspost/[email protected]



## @swisspost/[email protected]

### Minor Changes

- Updated icon search, by implementing a paging and separating icon sets
from each other. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4351](#4351))

- Added documentation for responsive design. (by
[@leagrdv](https://github.com/leagrdv) with
[#4452](#4452))

### Patch Changes

- Replaced previously deleted CSS variables with SASS variables. (by
[@leagrdv](https://github.com/leagrdv) with
[#4446](#4446))
-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]
    -   @swisspost/[email protected]

## @swisspost/[email protected]

### Patch Changes

-   Updated dependencies:
    -   @swisspost/[email protected]

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
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.

[bug]: Documentation uses non-existent CSS variables
3 participants