ui-foundations 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +259 -0
- package/dist/assets/fonts/README.md +5 -0
- package/dist/assets/icons/location-roundtrip.svg +5 -0
- package/dist/assets/icons/location-track.svg +4 -0
- package/dist/assets/icons/location.svg +4 -0
- package/dist/assets/icons/lock-checkmark.svg +4 -0
- package/dist/assets/icons/lock-close.svg +4 -0
- package/dist/assets/icons/lock-open.svg +5 -0
- package/dist/assets/icons/login.svg +4 -0
- package/dist/assets/icons/logout.svg +3 -0
- package/dist/assets/icons/loudspeaker.svg +3 -0
- package/dist/assets/icons/lounge-chair.svg +5 -0
- package/dist/assets/icons/luggage-backpack.svg +4 -0
- package/dist/assets/icons/luggage-backpacker.svg +4 -0
- package/dist/assets/icons/luggage-box.svg +5 -0
- package/dist/assets/icons/luggage-extra.svg +4 -0
- package/dist/assets/icons/luggage-golf.svg +4 -0
- package/dist/assets/icons/luggage-hand-plus.svg +5 -0
- package/dist/assets/icons/luggage-hand.svg +4 -0
- package/dist/assets/icons/luggage-liquids.svg +6 -0
- package/dist/assets/icons/luggage-notincluded.svg +3 -0
- package/dist/assets/icons/luggage-plus.svg +5 -0
- package/dist/assets/icons/luggage-sport.svg +4 -0
- package/dist/assets/icons/luggage-suitcase-extra.svg +5 -0
- package/dist/assets/icons/luggage-suitcase.svg +4 -0
- package/dist/assets/icons/luggage-trolley-extra.svg +5 -0
- package/dist/assets/icons/luggage-trolley.svg +3 -0
- package/dist/assets/icons/luggage-weekender.svg +4 -0
- package/dist/assets/icons/luggage.svg +3 -0
- package/dist/assets/icons/lying-chair.svg +4 -0
- package/dist/assets/icons/magnet.svg +3 -0
- package/dist/assets/icons/mail.svg +4 -0
- package/dist/assets/icons/map.svg +3 -0
- package/dist/assets/icons/meal-serving-plate.svg +5 -0
- package/dist/assets/icons/meal.svg +5 -0
- package/dist/assets/icons/medal.svg +4 -0
- package/dist/assets/icons/megaphone.svg +5 -0
- package/dist/assets/icons/menu-filter.svg +3 -0
- package/dist/assets/icons/menu.svg +3 -0
- package/dist/assets/icons/message-alert.svg +3 -0
- package/dist/assets/icons/message-info.svg +4 -0
- package/dist/assets/icons/message-love.svg +4 -0
- package/dist/assets/icons/message-push.svg +4 -0
- package/dist/assets/icons/message-text.svg +4 -0
- package/dist/assets/icons/message.svg +3 -0
- package/dist/assets/icons/mic.svg +4 -0
- package/dist/assets/icons/miniclub.svg +5 -0
- package/dist/assets/icons/minimize.svg +3 -0
- package/dist/assets/icons/minus-circled.svg +4 -0
- package/dist/assets/icons/minus-heavy.svg +3 -0
- package/dist/assets/icons/minus.svg +3 -0
- package/dist/assets/icons/moon.svg +3 -0
- package/dist/assets/icons/moose.svg +5 -0
- package/dist/assets/icons/mountain.svg +4 -0
- package/dist/assets/icons/mouth.svg +3 -0
- package/dist/assets/icons/muffin.svg +4 -0
- package/dist/assets/icons/museum.svg +3 -0
- package/dist/assets/icons/mustache.svg +3 -0
- package/dist/assets/icons/network.svg +3 -0
- package/dist/assets/icons/newsletter.svg +6 -0
- package/dist/assets/icons/none.svg +3 -0
- package/dist/assets/icons/nordic-walking.svg +3 -0
- package/dist/assets/icons/notepad.svg +3 -0
- package/dist/assets/icons/number.svg +3 -0
- package/dist/assets/icons/on-board-meals.svg +4 -0
- package/dist/assets/icons/paperjet.svg +4 -0
- package/dist/assets/icons/parasol.svg +4 -0
- package/dist/assets/icons/parking-garage.svg +4 -0
- package/dist/assets/icons/parking-time.svg +4 -0
- package/dist/assets/icons/pass-boarding.svg +4 -0
- package/dist/assets/icons/paw.svg +3 -0
- package/dist/assets/icons/pencil.svg +3 -0
- package/dist/assets/icons/pharmacy.svg +4 -0
- package/dist/assets/icons/phone-checkin.svg +4 -0
- package/dist/assets/icons/phone-push.svg +5 -0
- package/dist/assets/icons/phone.svg +3 -0
- package/dist/assets/icons/picture-mountain.svg +5 -0
- package/dist/assets/icons/picture-stack.svg +5 -0
- package/dist/assets/icons/picture-sunset.svg +4 -0
- package/dist/assets/icons/picture.svg +3 -0
- package/dist/assets/icons/piggy-bank.svg +5 -0
- package/dist/assets/icons/pin.svg +3 -0
- package/dist/assets/icons/play-circled.svg +4 -0
- package/dist/assets/icons/play-next.svg +3 -0
- package/dist/assets/icons/play-pause.svg +3 -0
- package/dist/assets/icons/play-prev.svg +3 -0
- package/dist/assets/icons/play-stop-circled.svg +4 -0
- package/dist/assets/icons/play-stop.svg +3 -0
- package/dist/assets/icons/play.svg +3 -0
- package/dist/assets/icons/plug.svg +3 -0
- package/dist/assets/icons/plus-circled.svg +4 -0
- package/dist/assets/icons/plus-heavy.svg +3 -0
- package/dist/assets/icons/plus.svg +3 -0
- package/dist/assets/icons/popsicle.svg +3 -0
- package/dist/assets/icons/postit.svg +4 -0
- package/dist/assets/icons/pricetag.svg +4 -0
- package/dist/assets/icons/printer.svg +5 -0
- package/dist/assets/icons/projector-canvas.svg +3 -0
- package/dist/assets/icons/puzzle.svg +3 -0
- package/dist/assets/icons/question-mark-bold.svg +4 -0
- package/dist/assets/icons/question-mark-circled.svg +4 -0
- package/dist/assets/icons/question-mark-ultrabold.svg +4 -0
- package/dist/assets/icons/question-mark.svg +3 -0
- package/dist/assets/icons/rainbow.svg +5 -0
- package/dist/assets/icons/reduced-circled.svg +4 -0
- package/dist/assets/icons/reduced.svg +3 -0
- package/dist/assets/icons/relax.svg +4 -0
- package/dist/assets/icons/resize.svg +4 -0
- package/dist/assets/icons/robot-smile.svg +16 -0
- package/dist/assets/icons/robot.svg +8 -0
- package/dist/assets/icons/room-location.svg +5 -0
- package/dist/assets/icons/room-selection.svg +5 -0
- package/dist/assets/icons/room-upgrade.svg +5 -0
- package/dist/assets/icons/running-shoe.svg +4 -0
- package/dist/assets/icons/sail.svg +3 -0
- package/dist/assets/icons/sailboat.svg +4 -0
- package/dist/assets/icons/sailing-yawl.svg +3 -0
- package/dist/assets/icons/save.svg +4 -0
- package/dist/assets/icons/scan-code.svg +5 -0
- package/dist/assets/icons/scissors.svg +4 -0
- package/dist/assets/icons/seal.svg +4 -0
- package/dist/assets/icons/search-heart.svg +4 -0
- package/dist/assets/icons/search-list.svg +4 -0
- package/dist/assets/icons/search.svg +4 -0
- package/dist/assets/icons/seat-check.svg +3 -0
- package/dist/assets/icons/seat-child.svg +4 -0
- package/dist/assets/icons/seat-comfort.svg +3 -0
- package/dist/assets/icons/seat-extra-legroom.svg +5 -0
- package/dist/assets/icons/seat-extra-space.svg +5 -0
- package/dist/assets/icons/seat-extra.svg +5 -0
- package/dist/assets/icons/seat-plus.svg +3 -0
- package/dist/assets/icons/seat-premium.svg +4 -0
- package/dist/assets/icons/seat-selection.svg +10 -0
- package/dist/assets/icons/seat-star.svg +3 -0
- package/dist/assets/icons/seat-top-booked.svg +5 -0
- package/dist/assets/icons/seat-top.svg +4 -0
- package/dist/assets/icons/seat.svg +3 -0
- package/dist/assets/icons/security-check.svg +7 -0
- package/dist/assets/icons/select.svg +3 -0
- package/dist/assets/icons/send.svg +3 -0
- package/dist/assets/icons/service-bell.svg +3 -0
- package/dist/assets/icons/serving-trolley.svg +6 -0
- package/dist/assets/icons/settings.svg +4 -0
- package/dist/assets/icons/sex-diversity.svg +3 -0
- package/dist/assets/icons/sex-female.svg +3 -0
- package/dist/assets/icons/sex-male.svg +3 -0
- package/dist/assets/icons/share-box.svg +4 -0
- package/dist/assets/icons/share.svg +6 -0
- package/dist/assets/icons/shield-check.svg +4 -0
- package/dist/assets/icons/shield-flex.svg +6 -0
- package/dist/assets/icons/shield-warning.svg +3 -0
- package/dist/assets/icons/shield.svg +3 -0
- package/dist/assets/icons/ship-river.svg +4 -0
- package/dist/assets/icons/ship.svg +5 -0
- package/dist/assets/icons/shoe.svg +3 -0
- package/dist/assets/icons/shop.svg +4 -0
- package/dist/assets/icons/shopping-bag-tui.svg +4 -0
- package/dist/assets/icons/shopping-bag.svg +4 -0
- package/dist/assets/icons/shoppingcart.svg +6 -0
- package/dist/assets/icons/shower-rain.svg +3 -0
- package/dist/assets/icons/shower.svg +3 -0
- package/dist/assets/icons/sign-airport.svg +4 -0
- package/dist/assets/icons/sign-bio.svg +5 -0
- package/dist/assets/icons/sign-directions.svg +12 -0
- package/dist/assets/icons/sign-first-aid.svg +4 -0
- package/dist/assets/icons/sign-gluten-free.svg +7 -0
- package/dist/assets/icons/sign-hotel.svg +3 -0
- package/dist/assets/icons/sign-info.svg +5 -0
- package/dist/assets/icons/sign-parking.svg +4 -0
- package/dist/assets/icons/sign-vegan.svg +4 -0
- package/dist/assets/icons/sign-vegetarian.svg +5 -0
- package/dist/assets/icons/signpost-direction.svg +3 -0
- package/dist/assets/icons/signpost-directions.svg +3 -0
- package/dist/assets/icons/signpost-hotel.svg +3 -0
- package/dist/assets/icons/ski-crosscountry.svg +4 -0
- package/dist/assets/icons/ski-mountain.svg +3 -0
- package/dist/assets/icons/snow.svg +3 -0
- package/dist/assets/icons/social-distancing.svg +5 -0
- package/dist/assets/icons/sort.svg +3 -0
- package/dist/assets/icons/square.svg +3 -0
- package/dist/assets/icons/star-circled.svg +4 -0
- package/dist/assets/icons/star-half.svg +3 -0
- package/dist/assets/icons/star.svg +3 -0
- package/dist/assets/icons/stats-bar.svg +3 -0
- package/dist/assets/icons/stats-growth.svg +4 -0
- package/dist/assets/icons/stats-pie.svg +4 -0
- package/dist/assets/icons/stats-rise.svg +3 -0
- package/dist/assets/icons/steering-wheel.svg +7 -0
- package/dist/assets/icons/steering.svg +3 -0
- package/dist/assets/icons/stewardess.svg +5 -0
- package/dist/assets/icons/suitcase-purchase.svg +5 -0
- package/dist/assets/icons/sum.svg +3 -0
- package/dist/assets/icons/sun-circled.svg +4 -0
- package/dist/assets/icons/sun-hours.svg +5 -0
- package/dist/assets/icons/sun-set.svg +3 -0
- package/dist/assets/icons/sun-tui-half.svg +4 -0
- package/dist/assets/icons/sun-tui.svg +4 -0
- package/dist/assets/icons/sun.svg +4 -0
- package/dist/assets/icons/surfing.svg +4 -0
- package/dist/assets/icons/swimming-bath.svg +3 -0
- package/dist/assets/icons/swimming-pool.svg +3 -0
- package/dist/assets/icons/sync-failed.svg +4 -0
- package/dist/assets/icons/sync.svg +4 -0
- package/dist/assets/icons/tape-measure.svg +4 -0
- package/dist/assets/icons/target-blank.svg +3 -0
- package/dist/assets/icons/target.svg +5 -0
- package/dist/assets/icons/teddy.svg +5 -0
- package/dist/assets/icons/temp-air.svg +5 -0
- package/dist/assets/icons/temp-low.svg +4 -0
- package/dist/assets/icons/temp-time.svg +7 -0
- package/dist/assets/icons/temp-water.svg +5 -0
- package/dist/assets/icons/temp.svg +4 -0
- package/dist/assets/icons/tennis-ball.svg +4 -0
- package/dist/assets/icons/tennis.svg +5 -0
- package/dist/assets/icons/tent.svg +4 -0
- package/dist/assets/icons/thumbnails.svg +3 -0
- package/dist/assets/icons/thumbs-up--down.svg +3 -0
- package/dist/assets/icons/thumbs-up.svg +3 -0
- package/dist/assets/icons/thunder.svg +3 -0
- package/dist/assets/icons/ticket-coins.svg +5 -0
- package/dist/assets/icons/ticket-envelope.svg +5 -0
- package/dist/assets/icons/ticket.svg +3 -0
- package/dist/assets/icons/tickets.svg +3 -0
- package/dist/assets/icons/tipi.svg +4 -0
- package/dist/assets/icons/toilet-paper.svg +5 -0
- package/dist/assets/icons/toilet.svg +3 -0
- package/dist/assets/icons/toolkit-cases-open.svg +3 -0
- package/dist/assets/icons/toolkit-cases.svg +3 -0
- package/dist/assets/icons/toolkit.svg +4 -0
- package/dist/assets/icons/towel.svg +3 -0
- package/dist/assets/icons/track.svg +3 -0
- package/dist/assets/icons/train.svg +4 -0
- package/dist/assets/icons/transfer-private.svg +5 -0
- package/dist/assets/icons/transfer-taxi.svg +4 -0
- package/dist/assets/icons/transfers-coach.svg +6 -0
- package/dist/assets/icons/transfers-train.svg +4 -0
- package/dist/assets/icons/trash-crossed.svg +3 -0
- package/dist/assets/icons/trash.svg +4 -0
- package/dist/assets/icons/travel-documents.svg +6 -0
- package/dist/assets/icons/travel-guide.svg +5 -0
- package/dist/assets/icons/travel-money.svg +4 -0
- package/dist/assets/icons/treats-in-flight.svg +4 -0
- package/dist/assets/icons/trolley-purchase.svg +5 -0
- package/dist/assets/icons/tub.svg +5 -0
- package/dist/assets/icons/tui-card.svg +4 -0
- package/dist/assets/icons/tui-chat.svg +5 -0
- package/dist/assets/icons/tui-cloud.svg +3 -0
- package/dist/assets/icons/tui-extras.svg +4 -0
- package/dist/assets/icons/typography.svg +3 -0
- package/dist/assets/icons/ui-banner.svg +4 -0
- package/dist/assets/icons/umbrella.svg +5 -0
- package/dist/assets/icons/undo.svg +4 -0
- package/dist/assets/icons/upload.svg +3 -0
- package/dist/assets/icons/user-business.svg +4 -0
- package/dist/assets/icons/user-casual.svg +4 -0
- package/dist/assets/icons/user-chat.svg +4 -0
- package/dist/assets/icons/user-circled.svg +4 -0
- package/dist/assets/icons/user-couple.svg +3 -0
- package/dist/assets/icons/user-driver.svg +6 -0
- package/dist/assets/icons/user-drivers.svg +4 -0
- package/dist/assets/icons/user-expert.svg +4 -0
- package/dist/assets/icons/user-family.svg +4 -0
- package/dist/assets/icons/user-friends.svg +3 -0
- package/dist/assets/icons/user-group.svg +4 -0
- package/dist/assets/icons/user-passport.svg +5 -0
- package/dist/assets/icons/user-plus.svg +3 -0
- package/dist/assets/icons/user-skipass.svg +4 -0
- package/dist/assets/icons/user-visa.svg +6 -0
- package/dist/assets/icons/user.svg +3 -0
- package/dist/assets/icons/users.svg +4 -0
- package/dist/assets/icons/view-hidden.svg +4 -0
- package/dist/assets/icons/view.svg +4 -0
- package/dist/assets/icons/villa.svg +4 -0
- package/dist/assets/icons/virtualtour.svg +4 -0
- package/dist/assets/icons/warehouse.svg +3 -0
- package/dist/assets/icons/wash-hands.svg +3 -0
- package/dist/assets/icons/watch.svg +3 -0
- package/dist/assets/icons/water-boiler.svg +4 -0
- package/dist/assets/icons/water-slide.svg +4 -0
- package/dist/assets/icons/water.svg +3 -0
- package/dist/assets/icons/welcome-pack.svg +3 -0
- package/dist/assets/icons/wellness.svg +6 -0
- package/dist/assets/icons/whatsapp.svg +4 -0
- package/dist/assets/icons/wheel.svg +6 -0
- package/dist/assets/icons/wheelchair.svg +4 -0
- package/dist/assets/icons/wifi.svg +3 -0
- package/dist/assets/icons/wind-surfing.svg +3 -0
- package/dist/assets/icons/world-globe.svg +4 -0
- package/dist/assets/icons/world-travel.svg +5 -0
- package/dist/assets/icons/world.svg +5 -0
- package/dist/core/base/base.css +13 -0
- package/dist/core/base/fonts.css +1 -0
- package/dist/core/base/reset.css +48 -0
- package/dist/core/base/typography.css +119 -0
- package/dist/core/index.css +12 -0
- package/dist/core/recipes/layout.css +24 -0
- package/dist/core/themes/mode.css +5 -0
- package/dist/main.css +1044 -0
- package/dist/react/button.js +95 -0
- package/dist/react/checkbox.js +43 -0
- package/dist/react/icon.js +50 -0
- package/dist/react/index.js +5 -0
- package/dist/react/input.js +12 -0
- package/dist/react/label.js +125 -0
- package/dist/tokens/css/brand-a.tokens.css +22 -0
- package/dist/tokens/css/brand-b.tokens.css +22 -0
- package/dist/tokens/css/color.dark.tokens.css +32 -0
- package/dist/tokens/css/color.light.tokens.css +32 -0
- package/dist/tokens/css/component.tokens.css +103 -0
- package/dist/tokens/css/primitives.tokens.css +127 -0
- package/dist/tokens/css/semantic.tokens.css +35 -0
- package/dist/tokens/json/brand-a.tokens.json +192 -0
- package/dist/tokens/json/brand-b.tokens.json +192 -0
- package/dist/tokens/json/color.dark.tokens.json +364 -0
- package/dist/tokens/json/color.light.tokens.json +364 -0
- package/dist/tokens/json/component.tokens.json +1101 -0
- package/dist/tokens/json/primitives.tokens.json +1077 -0
- package/dist/tokens/json/semantic.tokens.json +206 -0
- package/dist/tokens/tokens.yaml +4400 -0
- package/dist/tokens/ts/brand-a.tokens.ts +32 -0
- package/dist/tokens/ts/brand-b.tokens.ts +32 -0
- package/dist/tokens/ts/color.dark.tokens.ts +36 -0
- package/dist/tokens/ts/color.light.tokens.ts +36 -0
- package/dist/tokens/ts/component.tokens.ts +107 -0
- package/dist/tokens/ts/primitives.tokens.ts +152 -0
- package/dist/tokens/ts/semantic.tokens.ts +42 -0
- package/dist/ui/index.css +5 -0
- package/dist/ui/patterns/button.css +241 -0
- package/dist/ui/patterns/checkbox.css +97 -0
- package/dist/ui/patterns/icon.css +20 -0
- package/dist/ui/patterns/input.css +76 -0
- package/dist/ui/patterns/label.css +49 -0
- package/docs/foundations/foundation-001-token-layering.md +27 -0
- package/docs/foundations/foundation-002-naming-and-grouping.md +38 -0
- package/docs/foundations/foundation-003-color-semantics-and-status.md +35 -0
- package/docs/foundations/foundation-004-typography-scale-and-line-height.md +39 -0
- package/docs/foundations/foundation-005-responsive-breakpoints-and-containers.md +23 -0
- package/docs/foundations/foundation-006-z-index-layering.md +31 -0
- package/docs/foundations/foundation-007-typography-selectors-and-specificity.md +24 -0
- package/docs/foundations/foundation-008-mode-activation-and-consumer-control.md +27 -0
- package/docs/foundations/foundation-009-component-boundaries-and-utility.md +30 -0
- package/package.json +64 -0
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M5.7824 19.3913C5.1764 19.3913 4.7824 19.7853 4.7824 20.3913V21.3913H17.7824V20.3913C17.7824 19.7853 17.3884 19.3913 16.7824 19.3913H5.7824ZM5.7824 19.3913V10.1229C5.7824 7.82292 4 6.08592 4 6.08592C4 6.08592 6.0824 3.79132 9.6932 3.16932C12.3958 2.70372 15.2978 2.81032 17.0354 2.81032C21.8222 2.81032 20.2054 10.0027 16.7824 13.8089L16.7534 19.3913H5.7824Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M16.7824 16.3914L18.7824 15.3914M15.5492 11.0342C15.5492 11.0342 13.7076 6.69477 14.571 5.65677C14.9494 5.20197 16.4584 5.07997 16.9278 5.44037C17.5146 5.89097 17.331 7.79497 17.1318 8.39257C16.8652 9.19337 15.5492 11.0342 15.5492 11.0342Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M4 17H6C12 17 14 6 18 6H21" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M4 14H6C10 14 12 3 18 3H21M19 17V6M2 20C2.4986 20.5986 3.2038 21 4 21C4.7874 21 5.502 20.587 6 20C6.4986 20.5986 7.2038 21 8 21C8.7874 21 9.502 20.587 10 20C10.4986 20.5986 11.2038 21 12 21C12.7874 21 13.502 20.587 14 20C14.4986 20.5986 15.2038 21 16 21C16.7874 21 17.502 20.587 18 20C18.4986 20.5986 19.2038 21 20 21C20.7874 21 21.502 20.587 22 20M17 17H21" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M21 16.9999C18 18.3331 14.9998 18.3335 11.9994 16.9999C9 15.6667 6 15.6667 3 16.9999M21 12C18 13.3332 14.9998 13.3336 11.9994 12C9 10.6668 6 10.6668 3 12M21 6.99975C18 8.33315 14.9998 8.33375 11.9994 6.99975C9 5.66675 6 5.66675 3 6.99975" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12 7V21M12 7V5M12 7H10C8.8954 7 8 6.1046 8 5C8 3.8954 8.8954 3 10 3C11.1046 3 12 3.8954 12 5M12 7H14C15.1046 7 16 6.1046 16 5C16 3.8954 15.1046 3 14 3C12.8954 3 12 3.8954 12 5M3 11H21V7H3V11ZM5 21H19V11H5V21Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M5.01237 16.3909C3.18317 17.1319 1.92317 18.4309 1.92317 18.4309C1.92317 18.4309 4.38837 20.8939 7.42917 20.8937C9.29217 20.8937 10.9378 19.9697 11.9342 19.2537" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M11.9342 19.2534C12.9304 19.9698 14.5762 20.8938 16.4392 20.8936C19.48 20.8936 21.9452 18.4306 21.9452 18.4306C21.9452 18.4306 20.726 17.175 18.946 16.4286M8.02637 12.0948C5.67397 10.2902 2.92897 9.89258 2.92897 9.89258C2.92897 9.89258 2.74137 13.8866 5.01257 16.391C5.07757 16.4626 5.14397 16.5338 5.21337 16.6032C7.19637 18.586 10.2874 18.8586 11.4548 18.8882" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M11.938 18.8805C11.938 18.8805 16.2362 19.1515 18.72 16.6675C18.798 16.5895 18.8734 16.5097 18.946 16.4285C21.1872 13.9181 20.9332 9.8855 20.9332 9.8855C20.9332 9.8855 18.1906 10.2891 15.8386 12.0971" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8704 18.8894C11.8704 18.8894 15.2696 15.6 15.8386 12.0974C15.9032 11.7008 15.9386 11.2948 15.9386 10.8814C15.9386 6.45902 11.8706 2.87402 11.8706 2.87402C11.8706 2.87402 7.92957 6.45902 7.92957 10.8816C7.92957 11.294 7.96397 11.6992 8.02617 12.095C8.63077 15.9418 11.8704 18.8894 11.8704 18.8894Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.92461 20.4608L3.00001 23L4.84601 17.4618C3.64581 15.8943 2.99687 13.9742 3.00001 12C3.00001 7.0292 7.02941 3 12 3C16.9706 3 21 7.0292 21 12C21 16.9708 16.9706 21 12 21C10.9513 21.0012 9.91039 20.8187 8.92461 20.4608Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.211 13.3076C14.956 13.1204 14.6002 13.0452 14.3174 13.308C14.316 13.3096 13.4988 14.0536 13.4988 14.0536C13.4084 14.0384 12.7332 13.9222 11.3906 12.5746C10.0472 11.2276 9.95761 10.5774 9.94221 10.487C9.94221 10.487 10.6982 9.68143 10.6998 9.68003C10.9614 9.39623 10.8936 9.04603 10.707 8.79063C10.707 8.79063 8.97061 7.04563 8.92381 7.00263C8.60781 6.70903 8.14261 6.74063 7.85061 7.05803C7.84861 7.05963 7.30661 7.60203 7.30661 7.60203C6.13861 8.99303 6.98261 11.099 9.92261 14.0476C12.8628 16.9964 14.9886 17.8686 16.3752 16.6972L16.9432 16.1778C17.2602 15.8846 17.29 15.4164 16.9974 15.0994C16.9546 15.0526 15.211 13.3076 15.211 13.3076Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M5.60001 12H18.4M8.80001 17.5426L15.2 6.4574M8.80001 6.4574L15.2 17.5426" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M12 18.4C15.5346 18.4 18.4 15.5346 18.4 12C18.4 8.46535 15.5346 5.59998 12 5.59998C8.46538 5.59998 5.60001 8.46535 5.60001 12C5.60001 15.5346 8.46538 18.4 12 18.4Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M11 12H15M10 8L12 16H17L19 20" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M16.0454 18.9392C15.1364 20.1882 13.663 21 12 21C9.2384 21 7 18.7616 7 16C7 14.3884 7.7624 12.9548 8.9462 12.0406M9 4C9 3.73478 9.10536 3.48043 9.29289 3.29289C9.48043 3.10536 9.73478 3 10 3C10.2652 3 10.5196 3.10536 10.7071 3.29289C10.8946 3.48043 11 3.73478 11 4C11 4.26522 10.8946 4.51957 10.7071 4.70711C10.5196 4.89464 10.2652 5 10 5C9.73478 5 9.48043 4.89464 9.29289 4.70711C9.10536 4.51957 9 4.26522 9 4Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M21.1848 8.8076C18.832 6.455 15.582 5 11.9924 5C8.40239 5 5.15239 6.455 2.79999 8.8076M5.62839 11.636C7.25719 10.0072 9.50719 9 11.9924 9C14.4776 9 16.7276 10.0072 18.3564 11.636M15.528 14.4644C15.0642 13.9994 14.5131 13.6307 13.9063 13.3794C13.2996 13.1281 12.6491 12.9991 11.9924 13C11.3357 12.9991 10.6853 13.1281 10.0786 13.3794C9.47183 13.6307 8.92075 13.9994 8.45699 14.4644M11.2 18C11.2 17.7878 11.2843 17.5843 11.4343 17.4343C11.5843 17.2843 11.7878 17.2 12 17.2C12.2122 17.2 12.4156 17.2843 12.5657 17.4343C12.7157 17.5843 12.8 17.7878 12.8 18C12.8 18.2122 12.7157 18.4157 12.5657 18.5657C12.4156 18.7157 12.2122 18.8 12 18.8C11.7878 18.8 11.5843 18.7157 11.4343 18.5657C11.2843 18.4157 11.2 18.2122 11.2 18Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M3 21H18C19.3334 21 20.3334 20.9334 21 20.8M6 21V22L7 21M14 3V21M7 14H15M14 4C10 5.3334 8 9.3334 8 16L14 18V4Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M20.683 7.38933L18.9074 7.93213L18.658 7.74973L17.6306 8.16953L17.2748 8.47453L16.889 8.32453L15.8544 9.34653L14.8848 8.34393L15.5486 7.65013L14.4634 7.21373L14.1336 6.87613L13.0008 6.88953L11.5778 7.71413L11.7064 8.34673L10.5998 9.38473L9.7606 10.0375L9.9704 11.1221L11.0302 11.3393L10.3308 11.9141L10.3632 12.5147L8.0136 14.0553L7.0924 15.3459L7.0978 16.7399L8.534 16.6867L9.4044 15.5687L10.5788 15.0829L11.2 15.9999L11.6 14.7999L12.2168 15.5159L13.0632 16.8257L13.6 16.3999L14.9314 17.1029L15.389 16.9327L15.311 19.2627L13.6412 19.5991L12.9004 19.3089L12.1228 19.8037L10.7428 19.0581L10.3428 18.2453L9.3418 18.2811L8.5612 18.5573L7.582 18.8167L6.8 18.5999L6 19.9999M9 2.59993L9.6052 4.39833L10.1722 5.12793L12.054 4.07793L12.0756 3.54093L13.0124 2.11853M8.26 11.3295L8.0776 12.0015L5.268 12.5591L5.8602 10.8595L3.909 10.4261L5.2056 9.12733L6.331 7.39993L6.7906 8.06233L7.834 10.9207L8.26 11.3295Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6 21.2V18.2H9M18.4 3V6H15.4M16.3382 9C16.508 9.9384 16.6 10.9482 16.6 11.9998C16.6 13.2424 16.4712 14.4264 16.2384 15.5032C16.0056 16.58 15.6686 17.5496 15.2526 18.364C14.8364 19.1784 14.3406 19.8374 13.7906 20.2928C13.24 20.7482 12.6348 21 12 21M7.6618 15C7.492 14.0616 7.4 13.0518 7.4 11.9998V12.0002C7.4 10.7576 7.5288 9.5736 7.7616 8.4968C7.9944 7.42 8.3314 6.4504 8.7474 5.636C9.1636 4.8216 9.6594 4.1626 10.2094 3.7072C10.76 3.2518 11.3652 3 12 3" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M4 16C5.99 15.3854 8.8372 15 12.0006 15C15.1634 15 18.0102 15.3852 20 16M20 8C18.01 8.6146 15.163 9 11.9996 9C8.8364 9 5.9896 8.6148 4 8" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M17.9876 5.2806C16.3968 3.862 14.299 3 12 3C7.02941 3 3.00001 7.0294 3.00001 12C2.99797 13.4006 3.32423 14.7822 3.95261 16.034M6.02341 18.7292C7.61281 20.1418 9.70601 21 12 21C16.9706 21 21 16.9706 21 12C21.002 10.6117 20.6815 9.24191 20.0638 7.9986M12 6V18" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M12 21.9998V2M7 11.9994C7 6.4768 9.2386 2 11.9996 2C14.7612 2 17 6.4768 17 11.9994C17 17.5224 14.7612 21.9994 11.9996 21.9994C9.2386 21.9994 7 17.5224 7 11.9994Z" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M3.11121 16.1831C5.34401 15.5239 8.53881 15.1111 12.0882 15.1111C15.6382 15.1111 18.8336 15.5241 21.0666 16.1831M21.0668 7.77771C18.8338 8.43671 15.6384 8.84991 12.0888 8.84991C8.53881 8.84991 5.34401 8.43671 3.11121 7.77771" stroke="#9747FF" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
:root {
|
|
3
|
+
font-family: var(--font-family-sans, system-ui, sans-serif);
|
|
4
|
+
line-height: 1.5;
|
|
5
|
+
color: var(--color-text-default, #000);
|
|
6
|
+
background: var(--color-fill-surface, #fff);
|
|
7
|
+
|
|
8
|
+
font-optical-sizing: auto;
|
|
9
|
+
font-weight: 400;
|
|
10
|
+
font-style: normal;
|
|
11
|
+
font-size: 1rem;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rokkitt:wght@400;500;600;700&display=swap");
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@layer reset {
|
|
2
|
+
*,
|
|
3
|
+
*::before,
|
|
4
|
+
*::after {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
html,
|
|
13
|
+
body {
|
|
14
|
+
height: 100%;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
body {
|
|
18
|
+
-webkit-font-smoothing: antialiased;
|
|
19
|
+
text-rendering: optimizeLegibility;
|
|
20
|
+
margin: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
img,
|
|
24
|
+
picture,
|
|
25
|
+
video,
|
|
26
|
+
canvas,
|
|
27
|
+
svg {
|
|
28
|
+
display: block;
|
|
29
|
+
max-width: 100%;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
input,
|
|
33
|
+
button,
|
|
34
|
+
textarea,
|
|
35
|
+
select {
|
|
36
|
+
font: inherit;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
p,
|
|
40
|
+
h1,
|
|
41
|
+
h2,
|
|
42
|
+
h3,
|
|
43
|
+
h4,
|
|
44
|
+
h5,
|
|
45
|
+
h6 {
|
|
46
|
+
overflow-wrap: break-word;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
/**
|
|
3
|
+
* Typography
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:where(h1, h2, h3, h4, h5, h6, .heading) {
|
|
7
|
+
color: var(--color-text-strong);
|
|
8
|
+
font-family: var(--typography-heading-font-family);
|
|
9
|
+
font-weight: var(--typography-heading-font-weight);
|
|
10
|
+
line-height: var(--typography-heading-line-height);
|
|
11
|
+
text-rendering: optimizeLegibility;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:where(p, span, .body) {
|
|
15
|
+
color: var(--color-text-default);
|
|
16
|
+
font-family: var(--typography-body-font-family);
|
|
17
|
+
line-height: var(--typography-body-line-height);
|
|
18
|
+
font-weight: var(--typography-body-font-weight);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Heading scale */
|
|
22
|
+
:where(h1, .heading-xxxl) {
|
|
23
|
+
font-size: var(--typography-heading-font-size-xxxl);
|
|
24
|
+
line-height: var(--typography-heading-line-height-xxxl);
|
|
25
|
+
margin-bottom: calc(
|
|
26
|
+
var(--typography-heading-line-height-xxxl) *
|
|
27
|
+
var(--typography-heading-font-size-xxxl)
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
:where(h2, .heading-xxl) {
|
|
32
|
+
font-size: var(--typography-heading-font-size-xxl);
|
|
33
|
+
line-height: var(--typography-heading-line-height-xxl);
|
|
34
|
+
margin-bottom: calc(
|
|
35
|
+
var(--typography-heading-line-height-xxl) *
|
|
36
|
+
var(--typography-heading-font-size-xxl)
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:where(h3, .heading-xl) {
|
|
41
|
+
font-size: var(--typography-heading-font-size-xl);
|
|
42
|
+
line-height: var(--typography-heading-line-height-xl);
|
|
43
|
+
margin-bottom: calc(
|
|
44
|
+
var(--typography-heading-line-height-xl) *
|
|
45
|
+
var(--typography-heading-font-size-xl)
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:where(h4, .heading-lg) {
|
|
50
|
+
font-size: var(--typography-heading-font-size-lg);
|
|
51
|
+
line-height: var(--typography-heading-line-height-lg);
|
|
52
|
+
margin-bottom: calc(
|
|
53
|
+
var(--typography-heading-line-height-lg) *
|
|
54
|
+
var(--typography-heading-font-size-lg)
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:where(h5, .heading-md) {
|
|
59
|
+
font-size: var(--typography-heading-font-size-md);
|
|
60
|
+
line-height: var(--typography-heading-line-height-md);
|
|
61
|
+
margin-bottom: calc(
|
|
62
|
+
var(--typography-heading-line-height-md) *
|
|
63
|
+
var(--typography-heading-font-size-md)
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
:where(h6, .heading-sm) {
|
|
68
|
+
font-size: var(--typography-heading-font-size-sm);
|
|
69
|
+
line-height: var(--typography-heading-line-height-sm);
|
|
70
|
+
margin-bottom: calc(
|
|
71
|
+
var(--typography-heading-line-height-sm) *
|
|
72
|
+
var(--typography-heading-font-size-sm)
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* Text scale */
|
|
77
|
+
:where(sup, sub, .text-xs) {
|
|
78
|
+
font-size: var(--font-size-xs);
|
|
79
|
+
line-height: var(--line-height-xs);
|
|
80
|
+
margin-bottom: calc(var(--line-height-xs) * var(--font-size-xs));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
:where(.text-sm) {
|
|
84
|
+
font-size: var(--font-size-sm);
|
|
85
|
+
line-height: var(--line-height-sm);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
:where(.text-md) {
|
|
89
|
+
font-size: var(--font-size-md);
|
|
90
|
+
line-height: var(--line-height-md);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
:where(.text-lg) {
|
|
94
|
+
font-size: var(--font-size-lg);
|
|
95
|
+
line-height: var(--line-height-lg);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
:where(.text-xl) {
|
|
99
|
+
font-size: var(--font-size-xl);
|
|
100
|
+
line-height: var(--line-height-xl);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:where(.text-xxl) {
|
|
104
|
+
font-size: var(--font-size-xxl);
|
|
105
|
+
line-height: var(--line-height-xxl);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:where(.text-xxxl) {
|
|
109
|
+
font-size: var(--font-size-xxxl);
|
|
110
|
+
line-height: var(--line-height-xxxl);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* font weights */
|
|
114
|
+
b,
|
|
115
|
+
strong,
|
|
116
|
+
.bold {
|
|
117
|
+
font-weight: 700;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
@import url("./base/reset.css") layer(reset);
|
|
2
|
+
@import url("./base/fonts.css") layer(base);
|
|
3
|
+
@import url("./base/base.css") layer(base);
|
|
4
|
+
@import url("./base/typography.css") layer(base);
|
|
5
|
+
@import url("../tokens/css/primitives.tokens.css") layer(tokens);
|
|
6
|
+
@import url("../tokens/css/brand-a.tokens.css") layer(tokens);
|
|
7
|
+
@import url("../tokens/css/brand-b.tokens.css") layer(tokens);
|
|
8
|
+
@import url("../tokens/css/semantic.tokens.css") layer(tokens);
|
|
9
|
+
@import url("../tokens/css/component.tokens.css") layer(tokens);
|
|
10
|
+
@import url("../tokens/css/color.light.tokens.css") layer(tokens);
|
|
11
|
+
@import url("../tokens/css/color.dark.tokens.css") layer(tokens);
|
|
12
|
+
@import url("./themes/mode.css") layer(themes);
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
/* Responsive & Layering examples (ui-foundations) */
|
|
3
|
+
|
|
4
|
+
/* Viewport breakpoint (media query) */
|
|
5
|
+
@media (min-width: 1200px) {
|
|
6
|
+
/* Example: page-level layout adjustments */
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* Container query (component-level) */
|
|
10
|
+
.card {
|
|
11
|
+
container-type: inline-size;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@container (min-width: 768px) {
|
|
15
|
+
.card {
|
|
16
|
+
/* Example: component layout changes */
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Z-index usage (token export example) */
|
|
21
|
+
.modal-overlay { z-index: var(--zindex-modal-overlay); }
|
|
22
|
+
.modal { z-index: var(--zindex-modal); }
|
|
23
|
+
.tooltip { z-index: var(--zindex-tooltip); }
|
|
24
|
+
}
|