Commit Graph

251 Commits

Author SHA1 Message Date
chapoi
fb41fccb20
UX: new default border radius (#26560)
* UX: remove border radius from PMs

* UX: add default 2px border radius
2024-04-08 22:21:57 +02:00
Jarek Radosz
570e3f7a1a
UX: Tweak the mention padding (#26492)
…to prevent them from overlapping/touching when placed on consecutive lines of text
2024-04-05 22:23:37 +02:00
Kris
0de20f860b
UX: update twitter blue to X black (#26343) 2024-03-25 11:36:33 -04:00
Jarek Radosz
9c7b1b16dd
UX: Convert mention style to inline (#26317)
Works around a webkit bug (?) and makes more sense for elements that are mostly text and displayed _inline_ with text content.

Tested on Chromium and in macOS Safari, with 3 different text sizes in the Interface settings
2024-03-25 09:55:29 +01:00
David Taylor
8b935e5b33
Revert "UX: Make input sizing consistent across all browsers (#26159)" (#26295)
This reverts commit d0d4a363d4. This causes issues for people that have specified explicit font sizes in their browser - reverting while we investigate. https://meta.discourse.org/t/300374
2024-03-21 17:54:11 +00:00
David Taylor
d0d4a363d4
UX: Make input sizing consistent across all browsers (#26159)
Previously we had an iOS-specific sizing rule which would increase inputs to `1.07em`, which would bring them over the 16px 'zoom on focus' threshold in some (but technically, not all) situations.

This commit does two things:

1. Updates the sizing rule from `1.07em` to `max(1em, 16px)`. Essentially: use the cascaded font size, unless it is smaller than 16px

2. Applies that sizing rule on all platforms. This will make Discourse design/theming more consistent across different devices

It also removes some associated CSS rules which no longer make sense.
2024-03-20 16:23:44 +00:00
Kris
8b4730e52c
DEV: unused CSS cleanup, variable updates, simplification (#26111) 2024-03-11 09:07:53 -04:00
Kris
4c7d58a883
UX: update Facebook blue hex, add comment about button color (#26105) 2024-03-08 11:47:59 -05:00
chapoi
a695d85cbd
UX: Update selected colour var (#25500) 2024-01-31 09:32:38 +01:00
chapoi
7392e0e8a2
UX: have svg icons inherit colour (#24871) 2023-12-13 15:34:29 +01:00
Kris
0139481188
UX: move monospace font to variable (#24762) 2023-12-07 09:51:14 -05:00
Jordan Vidrine
35dde2da21
FIX: Add more specificity to outline (#24611) 2023-11-28 12:44:45 -06:00
Jordan Vidrine
8f901cdd38
UX: Change direction of focus outline (#24605) 2023-11-28 10:58:16 -06:00
Penar Musaraj
1a70817962
DEV: Add UI for passkeys (3/3) (#23853)
Adds UI elements for registering a passkey and logging in with it. The feature is still in an early stage, interested parties that want to try it can use the `experimental_passkeys` site setting (via Rails console). 

See PR for more details. 
---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-10-13 12:24:06 -04:00
Kris
98c8dcecba
A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
Kris
22747e26fd
DEV: common CSS property for content backgrounds (#23467) 2023-09-08 12:07:04 -04:00
chapoi
0ce0bcd8ff
Remove border radius from chat (#22437)
* add border-radius-large variable

* UX: replace chat border-radius with variable
2023-07-10 15:07:38 +02:00
Kris
4cec091f1a
REFACTOR: improve poll info layout (#22353) 2023-07-05 12:20:18 -04:00
Kris
7958f57174
UX: softer dropdown and menu panel shadows (#22114) 2023-06-15 10:52:51 -04:00
Kris
e0f848c2ea
REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
Kris
5ed24bc8a1
UX: dark color palettes need darker shadows (#22051) 2023-06-12 10:15:14 -04:00
Kris
ae8347d948
UX: minor #mention style adjustments (#22048) 2023-06-09 15:08:54 -04:00
Kris
2aae8d6092
UX: increase sidebar font-size (#21704) 2023-05-24 11:00:20 -04:00
Jordan Vidrine
984a616204
Button research (#21621) 2023-05-22 16:03:34 -05:00
chapoi
1372c5c435
UX: onebox/blockquote/chatreaction slight accent colour change (#21252) 2023-04-26 15:11:20 +02:00
Kris
1c64b2dd95
UX: allow sidebar to appear inline down to 768px (#20271)
* UX: allow sidebar to appear inline down to 768px

* test fix

* fix typos
2023-02-14 09:51:42 +11:00
Rafael dos Santos Silva
6e522e4aad
DEV: Move to Sass compilation to dart-sass (#19910)
This PR is a major change to Sass compilation in Discourse.

The new version of sass-ruby moves to dart-sass putting we back on the supported version of Sass. It does so while keeping compatibility with the existing method signatures, so minimal change is needed in Discourse for this change.

This moves us

From:
  - sassc 2.0.1 (Feb 2019)
  - libsass 3.5.2 (May 2018)

To:
  - dart-sass 1.58

This update applies the following breaking changes:

> 
> These breaking changes are coming soon or have recently been released:
> 
>  [Functions are stricter about which units they allow](https://sass-lang.com/documentation/breaking-changes/function-units) beginning in Dart Sass 1.32.0.
> 
>  [Selectors with invalid combinators are invalid](https://sass-lang.com/documentation/breaking-changes/bogus-combinators) beginning in Dart Sass 1.54.0.
> 
>  [/ is changing from a division operation to a list separator](https://sass-lang.com/documentation/breaking-changes/slash-div) beginning in Dart Sass 1.33.0.
> 
>  [Parsing the special syntax of @-moz-document will be invalid](https://sass-lang.com/documentation/breaking-changes/moz-document) beginning in Dart Sass 1.7.2.
> 
>  [Compound selectors could not be extended](https://sass-lang.com/documentation/breaking-changes/extend-compound) in Dart Sass 1.0.0 and Ruby Sass 4.0.0.


SCSS files have been migrated automatically using `sass-migrator division app/assets/stylesheets/**/*.scss`
2023-02-07 12:24:57 -03:00
chapoi
e03f6057ec
UX: Highlight var refactor (#20026)
* Add new color vars

* Select-kit > use new color vars

* update all color schemes with values for new hover/select vars

* Add variable yml names
2023-01-27 15:50:36 +01:00
chapoi
6f9843803d
UX: add new boxshadow variation (#19450) 2022-12-14 12:35:23 +01:00
chapoi
211700bc5c
UX: change highlight colour (#19451) 2022-12-14 07:14:28 +08:00
Kris
07e4b7550d
DEV: relocate :root CSS custom properties (#19389) 2022-12-09 14:33:15 -05:00
Kris
6d1de26279
UX: refactor & update small post styles (#19274) 2022-12-05 09:54:29 -05:00
Kris
6b7bdc991d
UX: improve mention styling, simplify (#19169)
* UX: improve mention styling, simplify

* revert default
2022-11-24 09:35:57 +11:00
Kris
b0f380c4c7
UX: improve mention styling (#19156)
This updates mention styling. This reduces bold, increases contrast, and makes inactive mentions look more inactive.
2022-11-23 09:17:03 +10:00
Martin Brennan
d3f02a1270
FEATURE: Generic hashtag autocomplete lookup and markdown cooking (#18937)
This commit fleshes out and adds functionality for the new `#hashtag` search and
lookup system, still hidden behind the `enable_experimental_hashtag_autocomplete`
feature flag.

**Serverside**

We have two plugin API registration methods that are used to define data sources
(`register_hashtag_data_source`) and hashtag result type priorities depending on
the context (`register_hashtag_type_in_context`). Reading the comments in plugin.rb
should make it clear what these are doing. Reading the `HashtagAutocompleteService`
in full will likely help a lot as well.

Each data source is responsible for providing its own **lookup** and **search**
method that returns hashtag results based on the arguments provided. For example,
the category hashtag data source has to take into account parent categories and
how they relate, and each data source has to define their own icon to use for the
hashtag, and so on.

The `Site` serializer has two new attributes that source data from `HashtagAutocompleteService`.
There is `hashtag_icons` that is just a simple array of all the different icons that
can be used for allowlisting in our markdown pipeline, and there is `hashtag_context_configurations`
that is used to store the type priority orders for each registered context.

When sending emails, we cannot render the SVG icons for hashtags, so
we need to change the HTML hashtags to the normal `#hashtag` text.

**Markdown**

The `hashtag-autocomplete.js` file is where I have added the new `hashtag-autocomplete`
markdown rule, and like all of our rules this is used to cook the raw text on both the clientside
and on the serverside using MiniRacer. Only on the server side do we actually reach out to
the database with the `hashtagLookup` function, on the clientside we just render a plainer
version of the hashtag HTML. Only in the composer preview do we do further lookups based
on this.

This rule is the first one (that I can find) that uses the `currentUser` based on a passed
in `user_id` for guardian checks in markdown rendering code. This is the `last_editor_id`
for both the post and chat message. In some cases we need to cook without a user present,
so the `Discourse.system_user` is used in this case.

**Chat Channels**

This also contains the changes required for chat so that chat channels can be used
as a data source for hashtag searches and lookups. This data source will only be
used when `enable_experimental_hashtag_autocomplete` is `true`, so we don't have
to worry about channel results suddenly turning up.

------

**Known Rough Edges**

- Onebox excerpts will not render the icon svg/use tags, I plan to address that in a follow up PR
- Selecting a hashtag + pressing the Quote button will result in weird behaviour, I plan to address that in a follow up PR
- Mixed hashtag contexts for hashtags without a type suffix will not work correctly, e.g. #ux which is both a category and a channel slug will resolve to a category when used inside a post or within a [chat] transcript in that post. Users can get around this manually by adding the correct suffix, for example ::channel. We may get to this at some point in future
- Icons will not show for the hashtags in emails since SVG support is so terrible in email (this is not likely to be resolved, but still noting for posterity)
- Additional refinements and review fixes wil
2022-11-21 08:37:06 +10:00
Kris
19ec341bce
DEV: allow themes to more easily set border-radii (#19037) 2022-11-16 11:35:09 -05:00
Kris
d0f88da9c9
FEATURE: control topic width with variables (#18743) 2022-10-25 14:45:37 -04:00
chapoi
da9ce77ffd
UX: danger colour update (#18516)
* UX: danger colour update

* Update test
2022-10-12 19:01:01 +02:00
Jarek Radosz
4170b9bb58
DEV: Use more css vars (#18561)
Followup to #18518

This time it's mostly line-height vars and a couple of other uncommon vars.
2022-10-12 16:05:42 +02:00
Penar Musaraj
cc4af80c7d
DEV: refactor bootbox alerts (#18292) 2022-09-27 14:47:13 -04:00
Jarek Radosz
87f8bafa7e
DEV: Remove obsolete CSS prefixes (#18262) 2022-09-15 16:54:08 +02:00
Jarek Radosz
658eedeaa7
UX: Avoid showing text cursor on unselectables (#18261) 2022-09-15 15:56:45 +02:00
Jarek Radosz
1284d746b0
DEV: Remove progid:DXImageTransform (#18017) 2022-08-21 09:17:58 +02:00
Kris
a24bcceb19
UX: option to account for the sidebar in the breakpoint mixin (#17577)
* UX: account for sidebar in breakpoint mixin

* default to false
2022-07-20 10:56:41 +08:00
Kris
f0005401b7
UX: core adjustments and styles for the experimental sidebar (#17271) 2022-06-29 10:49:01 +08:00
Chapoi
a6abf8d07a
UX: update hljs-builtin-name colour (#16863) 2022-05-18 16:11:59 -04:00
Chapoi
96d656f450
UX: update hljs-builtin-name highlight (#16859)
* update hljs-builtin-name highlight

* Move dark-light function to better file
2022-05-18 15:55:40 +02:00
Jordan Vidrine
8cb344ddde
UX: Change color functions to match original primary, tertiary functions (#16040)
* UX: Change the way new primary colors are calculated
2022-02-23 15:41:50 -06:00
Penar Musaraj
715ec0d72f
DEV: Normalize ol and ul styling (#16027) 2022-02-22 22:17:41 +01:00
Jordan Vidrine
c92e62a271
UX: Styleguide changes & color variable additions (#15984) 2022-02-17 14:39:29 -06:00