Textures
Nine-slice textures, icons and pixel rendering.
Redraw strategy
GUI nine-slices and progress bars are redrawn for this project. Item, block and HUD status icons come from the official Minecraft Java 26.3 client (pinned version and SHA-1), generated as base64 PNG data URIs by packages/textures/scripts/sync-vanilla-icons.mjs. Block icons are composed as isometric cubes from three visible faces exactly like the vanilla item renderer (rotateX 30° · rotateY 225° · scale 0.625), with per-face brightness from Direction.getShade(): top 1.0 / north 0.8 / east 0.6. See packages/textures/LICENSE-ASSETS.md.
Nine-slice
Buttons and panels use a 12×12 source with slice 3 through border-image. Border widths scale with --mc-gui, so changing GUI scale does not stretch or blur the art. Every texture class sets image-rendering: pixelated.
.mc-tex-panel {
border: calc(var(--mc-gui) * 3) solid transparent;
border-image: url("/textures/panel.svg") 3 / calc(var(--mc-gui) * 3) stretch;
}
Texture classes
| Class | Usage |
|---|---|
| mc-tex-btn | Button default |
| mc-tex-btn--hover | Button hover / focus |
| mc-tex-btn--disabled | Button disabled |
| mc-tex-btn-success | Primary action button |
| mc-tex-panel | Window panel |
| mc-tex-panel-dark | Translucent dark panel |
| mc-tex-slot | Item slot |
| mc-slot-selected | Selected slot |
| mc-tex-text-field | Text field |
| mc-tex-slider-track | Slider track |
| mc-tex-slider-thumb | Slider thumb |
| mc-tex-checkbox | Checkbox |
| mc-tex-tab | Tab |
| mc-tex-tooltip | Tooltip |
| mc-tex-hotbar | Hotbar |
| mc-tex-hotbar-selection | Hotbar selection |
| mc-tex-xp-bg | XP bar background |
| mc-tex-xp-fill | XP bar fill |
| mc-tex-boss-bg | Boss bar background |
| mc-tex-boss-fill | Boss bar fill |
| mc-tex-flame | Furnace flame |
| mc-tex-arrow | Furnace arrow |
| mc-tex-craft-arrow | Crafting arrow |
| mc-tex-brew-arrow | Brewing arrow |
| mc-tex-bubbles | Brewing bubbles |
| mc-tex-dirt | Dirt tiling |
Icons
airair-emptyapplearmorarmor-emptyarmor-halfbaked-potatoblaze-powderblue-dyebonebone-mealbowlbreadbrown-mushroomcharcoalclay-ballcoalcopper-ingotcrafting-tablediamonddiamond-chestplatedirt-blockeffect-absorptioneffect-bad omeneffect-blindnesseffect-breath of the nautiluseffect-conduit powereffect-darknesseffect-dolphins graceeffect-fire resistanceeffect-freezingeffect-glowingeffect-hasteeffect-health boosteffect-hero of the villageeffect-hungereffect-infestedeffect-instant damageeffect-instant healtheffect-invisibilityeffect-jump boosteffect-levitationeffect-luckeffect-mining fatigueeffect-nauseaeffect-night visioneffect-oozingeffect-poisoneffect-raid omeneffect-regenerationeffect-resistanceeffect-saturationeffect-slow fallingeffect-slownesseffect-speedeffect-strengtheffect-trial omeneffect-unluckeffect-water breathingeffect-weaknesseffect-weavingeffect-wind chargedeffect-witheremeraldexperience-bottlefilled-mapflintglass-bottlegold-ingotgrass-blockgravelgunpowderheartheart-emptyheart-halfhoneycombhungerhunger-emptyhunger-halficeicon-accessibilityicon-chat_modifiedicon-checkmarkicon-draft_reporticon-infoicon-inviteicon-languageicon-linkicon-link_highlightedicon-music_notesicon-new_realmicon-newsicon-ping_1icon-ping_2icon-ping_3icon-ping_4icon-ping_5icon-ping_unknownicon-searchicon-trial_availableicon-unseen_notificationicon-video_linkicon-video_link_highlightediron-blockiron-chestplateiron-horse-armoriron-ingotiron-orelapis-lazulimushroom-stewnether-wartnetherite-chestplatenetherite-ingotnetherite-upgrade-smithing-templateoak-logoak-plankspaperpotatopotionred-mushroomredstonesaddlesandstone-blockstone-brickssugar-caneswordwheatwheat-seedsimport { Icon } from "@tennantite/ui";
<Icon name="grass-block" size={16} />
size is in GUI px and defaults to 16. Icons are aria-hidden by default; provide an aria-label or nearby text when they carry meaning.
Import
@import "@tennantite/textures/css/textures.css";
Texture classes work on any element, but depend on the CSS variables from @tennantite/textures. If you copy a single icon, you do not need the full texture stylesheet.