max / balanced_breakfast
1 file changed,
+8 insertions,
-4 deletions
| @@ -1053,12 +1053,17 @@ | |||
| 1053 | 1053 | danger, category-two is success, category-four is warning. | |
| 1054 | 1054 | ||
| 1055 | 1055 | The base text colour is the generated one. What stays below is the box: | |
| 1056 | - | the raised treatment, the border, the type. */ | |
| 1056 | + | the border and the type. | |
| 1057 | + | ||
| 1058 | + | The raised fill and bevel this rule used to add are gone (2026-08-05). | |
| 1059 | + | Token::Badge is Depth::Flat because a label is not pressable, GoingsOn's | |
| 1060 | + | badges are flat, and BB was the only app dressing one as an object. A | |
| 1061 | + | divergence nothing else shares is drift, whatever the comment above it | |
| 1062 | + | said. */ | |
| 1057 | 1063 | .badge { | |
| 1058 | 1064 | display: inline-flex; | |
| 1059 | 1065 | align-items: center; | |
| 1060 | 1066 | gap: var(--gap-bound); | |
| 1061 | - | background-color: var(--surface-raised); | |
| 1062 | 1067 | border: var(--border-width) solid var(--border); | |
| 1063 | 1068 | border-radius: var(--radius-sm); | |
| 1064 | 1069 | padding: 0 var(--step-snug); | |
| @@ -1066,13 +1071,12 @@ | |||
| 1066 | 1071 | font-weight: 600; | |
| 1067 | 1072 | line-height: 1.3; | |
| 1068 | 1073 | white-space: nowrap; | |
| 1069 | - | box-shadow: var(--bevel-raised); | |
| 1070 | 1074 | } | |
| 1071 | 1075 | /* Filled is this app's own variant and has no counterpart in the | |
| 1072 | 1076 | description, which tones the text and leaves the fill alone. It is kept | |
| 1073 | 1077 | because a filled badge is how a recommendation reads at a glance, and it | |
| 1074 | 1078 | is driven off the same tone attribute so there is still one axis. */ | |
| 1075 | - | .badge--filled { border: none; box-shadow: none; } | |
| 1079 | + | .badge--filled { border: none; } | |
| 1076 | 1080 | .badge--filled[data-tone="info"] { background-color: var(--info); color: var(--content-on-action); } | |
| 1077 | 1081 | .badge--filled[data-tone="success"] { background-color: var(--success); color: var(--content-on-action); } | |
| 1078 | 1082 | .badge--filled[data-tone="warning"] { background-color: var(--warning); color: var(--content); } |