Loading video...

Video Failed to Load

Go Home

🎨 Native CSS Variables: change one token, update your whole site. Keep design systems tight with Oxygen 6

RealOxygenApp's profile picture

Oxygen

2,624 subscribers

127,952 views • 1 year ago •via X (Twitter)

Science & TechnologyEducationArts
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

You can now use Figma for FREE with this tool. It's called Penpot. An open-source design tool that mirrors Figma's layout and workflow, free, self-hostable → MCP server lets AI agents edit your designs directly → Free Dev Mode with instant CSS, SVG, and HTML → Native design tokens keep design & code in sync → Real-time collaboration built in 100% Free. Open source.
0:13

You can now use Figma for FREE with this tool. It's called Penpot. An open-source design tool that mirrors Figma's layout and workflow, free, self-hostable → MCP server lets AI agents edit your designs directly → Free Dev Mode with instant CSS, SVG, and HTML → Native design tokens keep design & code in sync → Real-time collaboration built in 100% Free. Open source.

Simplifying AI

57,383 views • 3 months ago

Deployed the first Tailwind CSS v4-powered website to the internet this afternoon 🥳 Native cascade layers, `@​property` definitions, `color-mix()`, and variables galore 🤩
0:17

Deployed the first Tailwind CSS v4-powered website to the internet this afternoon 🥳 Native cascade layers, `@​property` definitions, `color-mix()`, and variables galore 🤩

Adam Wathan

91,538 views • 2 years ago

`autofill` on inputs is ugly by default the background bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.
0:12

`autofill` on inputs is ugly by default the background bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.

Zée

83,832 views • 7 months ago

The native token of Solana is at $47B. The native token of the ONE PIECE universe should be at…? When culture becomes tradable, ask yourself— what’s your valuation on the world’s most influential anime franchise? Prepare for $ONE ☝️
0:16

The native token of Solana is at $47B. The native token of the ONE PIECE universe should be at…? When culture becomes tradable, ask yourself— what’s your valuation on the world’s most influential anime franchise? Prepare for $ONE ☝️

Freya Protocol (Expanding into OneParadise)

17,392 views • 8 months ago

UPDATE: Spline's 3D Code API for SwiftUI is GA! Create custom 3D interactions for your iOS/macOS projects. - Trigger events and transitions - Change object properties - Update variables - and more! Try it now.
0:10

UPDATE: Spline's 3D Code API for SwiftUI is GA! Create custom 3D interactions for your iOS/macOS projects. - Trigger events and transitions - Change object properties - Update variables - and more! Try it now.

Spline

20,072 views • 1 year ago

✍️ New article: CSS cap unit A look at how I solved a design problem with CSS cap unit. 🔗
0:18

✍️ New article: CSS cap unit A look at how I solved a design problem with CSS cap unit. 🔗

Ahmad Shadeed

34,492 views • 2 years ago

One of the best AI native product design by Gr8r Studio.
0:12

One of the best AI native product design by Gr8r Studio.

Tanjim

63,376 views • 3 months ago

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;
0:10

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;

Gabriel

110,920 views • 3 months ago

Say hi to the Kibo UI QR Code shadcn component! 🔠 Pass in any string 💪 Adjustable level of robustness 🎨 Customizable styling 🧠 Works with the new OKLCH CSS variables 💻 React Server Component available ↔️ Infinitely scalable SVG Link 👇🧵
0:10

Say hi to the Kibo UI QR Code shadcn component! 🔠 Pass in any string 💪 Adjustable level of robustness 🎨 Customizable styling 🧠 Works with the new OKLCH CSS variables 💻 React Server Component available ↔️ Infinitely scalable SVG Link 👇🧵

Hayden Bleasel

21,110 views • 1 year ago

Design Systems Database Massive collection of best-in-class design systems with visual styles, components and references from leading UI teams.
0:14

Design Systems Database Massive collection of best-in-class design systems with visual styles, components and references from leading UI teams.

Nick Babich

221,652 views • 2 years ago

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)
0:15

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)

Stitch by Google

219,386 views • 7 months ago

With Design Mode, you can now point, draw, or talk to update your UI.
0:15

With Design Mode, you can now point, draw, or talk to update your UI.

Cursor

1,980,662 views • 4 months ago

💡 DevTools tip: You can make your console.log stand out by adding some CSS to it! 🎨
0:13

💡 DevTools tip: You can make your console.log stand out by adding some CSS to it! 🎨

bolt.new

32,649 views • 2 years ago

Uli-get message ya ku-Update token meter lakini ukadelete bahati mbaya? Usiwe na pressure, bado unaweza update token meter yako. Simply dial *977# to retrieve your codes and update your token meter. #UsiachweGizani #UpdateTokenMeterYako ^JC
0:16

Uli-get message ya ku-Update token meter lakini ukadelete bahati mbaya? Usiwe na pressure, bado unaweza update token meter yako. Simply dial *977# to retrieve your codes and update your token meter. #UsiachweGizani #UpdateTokenMeterYako ^JC

The Kenya Power & Lighting Company Plc.

487,622 views • 2 years ago

Hi CSS systems LTD, please kindly tell your driver to go fuck himself. Thanks A usually polite London cyclist
0:13

Hi CSS systems LTD, please kindly tell your driver to go fuck himself. Thanks A usually polite London cyclist

Cycling in London

166,690 views • 2 years ago

Ku-update token meter yako ni rahisi kama kucheza na Kale kateam *cough* Man U *cough* When your token meter is scheduled, you will receive two 20-digit codes via SMS with a guide on how to start the update process. Follow these free and super easy steps to update your token meter. #UsiachweGizani #UpdateTokenMeterYako ^JC
0:20

Ku-update token meter yako ni rahisi kama kucheza na Kale kateam *cough* Man U *cough* When your token meter is scheduled, you will receive two 20-digit codes via SMS with a guide on how to start the update process. Follow these free and super easy steps to update your token meter. #UsiachweGizani #UpdateTokenMeterYako ^JC

The Kenya Power & Lighting Company Plc.

544,538 views • 2 years ago

A little sneak peek into one of many animations done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.
0:10

A little sneak peek into one of many animations done for a new project Last9. 🙈 → The motion is in sync with the scroll progress. Created using SCSS and a little bit Svelte magic to control the CSS Variables.

Tushar

12,555 views • 2 years ago

Starting a HeroUI Native project just got a lot simpler 🎉 One command, a complete Expo router app: ✓ HeroUI Native ✓ Uniwind ✓ Tailwind CSS ✓ Every required peer dependency 𝗻𝗽𝘅 𝗰𝗿𝗲𝗮𝘁𝗲-𝗵𝗲𝗿𝗼𝘂𝗶-𝗻𝗮𝘁𝗶𝘃𝗲-𝗮𝗽𝗽@𝗹𝗮𝘁𝗲𝘀𝘁
0:20

Starting a HeroUI Native project just got a lot simpler 🎉 One command, a complete Expo router app: ✓ HeroUI Native ✓ Uniwind ✓ Tailwind CSS ✓ Every required peer dependency 𝗻𝗽𝘅 𝗰𝗿𝗲𝗮𝘁𝗲-𝗵𝗲𝗿𝗼𝘂𝗶-𝗻𝗮𝘁𝗶𝘃𝗲-𝗮𝗽𝗽@𝗹𝗮𝘁𝗲𝘀𝘁

HeroUI

16,972 views • 4 months ago

Introducing the simplest and fastest way to launch a token on Arc, with $USDC -native liquidity. Already live on the testnet. Drop your wallets to show your love💖.
0:15

Introducing the simplest and fastest way to launch a token on Arc, with $USDC -native liquidity. Already live on the testnet. Drop your wallets to show your love💖.

Minara.Fun

63,135 views • 1 month ago