snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

2026-09-15 15:56:32 +05:00
commit 1d2bfcac0c
3159 changed files with 464524 additions and 0 deletions
--- a/react/features/base/ui/Tokens.ts
+++ b/react/features/base/ui/Tokens.ts
@@ -0,0 +1,685 @@
+/* eslint-disable @stylistic/no-multi-spaces */
+// Mapping between the token used and the color
+export const colorMap = {
+    // ----- Surfaces -----
+
+    // Default page background. If this changes, make sure to adapt the native side as well:
+    //  - JitsiMeetView.m
+    //  - JitsiMeetView.java
+    uiBackground: 'surface01',
+
+    // Container backgrounds (legacy tokens)
+    ui01: 'surface02',
+    ui02: 'surface03',
+    ui03: 'ui02',
+    ui04: 'surface05',
+    ui05: 'ui01',
+    ui06: 'ui03',
+    ui07: 'surface08',
+    ui08: 'ui21',
+    ui09: 'ui08',
+    ui10: 'ui04',
+
+    // ----- Actions -----
+
+    // Primary
+    action01: 'action01',
+    action01Hover: 'hover01',
+    action01Active: 'active01',
+
+    // Secondary
+    action02: 'action02',
+    action02Hover: 'hover02',
+    action02Active: 'active02',
+
+    // Destructive
+    actionDanger: 'action03',
+    actionDangerHover: 'hover03',
+    actionDangerActive: 'active03',
+
+    // Tertiary
+    action03: 'transparent',
+    action03Hover: 'hover05',
+    action03Active: 'surface03',
+
+    // Disabled
+    disabled01: 'disabled01',
+
+    // Focus
+    focus01: 'focus01',
+
+    // ----- Semantic Tokens (component-based, backwards compatible) -----
+
+    // Dialog/Modal Components
+    dialogBackground: 'surface02',      // Main dialog background (same as ui01)
+    dialogOverlay: 'surface03',         // Overlay/backdrop (same as ui02)
+    dialogBorder: 'ui02',               // Dialog borders
+    dialogText: 'textColor01',          // Primary dialog text (same as text01)
+    dialogSecondaryText: 'textColor02', // Secondary dialog text (same as text02)
+
+    // Large Video
+    largeVideoBackground: 'surface03',  // Main video area background (same as ui02)
+    largeVideoPlaceholder: 'surface03', // Placeholder when no video (same as ui02)
+
+    // Filmstrip
+    filmstripBackground: 'surface03',   // Filmstrip container background (same as ui02)
+    filmstripBackgroundHover: 'uiBackground', // Filmstrip background on hover/focus
+    filmstripDragHandle: 'icon02',      // Filmstrip resize drag handle color
+    filmstripDragHandleHover: 'icon01', // Filmstrip resize drag handle hover color
+    thumbnailBackground: 'surface03',   // Individual thumbnail background (same as ui02)
+    thumbnailBorder: 'ui03',            // Thumbnail borders (same as ui03)
+    thumbnailHover: 'hover05',          // Thumbnail hover state (same as action03Hover)
+    thumbnailTintBackground: 'uiBackground', // Thumbnail tint overlay background
+    thumbnailRaisedHandIcon: 'uiBackground', // Thumbnail raised hand indicator icon
+    thumbnailVideoBackground: 'uiBackground', // Thumbnail video/placeholder background
+
+    // Chat
+    chatBackground: 'surface02',              // Chat panel background (same as ui01)
+    chatBackdrop: 'ui04',                     // Chat screen background (same as ui10)
+    chatEmptyText: 'ui03',                    // Empty component text
+    chatInputBackground: 'surface03',         // Chat input field background (same as ui02)
+    chatInputBorder: 'surface03',             // Chat input border (same as ui02)
+    chatLink: 'action01',                     // Chat link color (same as link01)
+    chatLobbyMessageBubble: 'support06',      // Lobby message bubble background
+    chatLobbyMessageNotice: 'surface01',      // Lobby message notice text
+    chatLobbyRecipientContainer: 'support06', // Lobby recipient container background
+    chatMessageLocal: 'surface05',            // Local participant message bubble (same as ui04)
+    chatMessagePrivate: 'support05',          // Private/DM message bubble
+    chatMessageRemote: 'surface03',           // Remote participant message bubble (same as ui02)
+    chatMessageText: 'textColor01',           // Chat message text
+    chatPrivateNotice: 'textColor02',         // Private message notice text
+    chatRecipientCancelIcon: 'icon01',        // Recipient cancel icon color
+    chatRecipientContainer: 'support05',      // Recipient container background
+    chatRecipientText: 'textColor01',         // Recipient text color
+    chatReplyIcon: 'icon01',                  // Reply icon color
+    chatSenderName: 'textColor02',            // Sender display name color
+    chatTimestamp: 'ui03',                    // Chat timestamp text
+
+    // Toolbox/Toolbar
+    toolboxBackground: 'surface02',     // Main toolbox background
+    drawerBackground: 'surface02',      // Drawer/side panel background
+    toolboxIconHover: 'surface05',      // Toolbox icon hover background
+    toolboxIconActive: 'ui02',          // Toolbox icon active/pressed background
+    toolboxIconToggled: 'ui02',         // Toolbox icon toggled background
+    toolbarButton: 'action01',          // Toolbar button color
+    toolbarButtonHover: 'hover01',      // Toolbar button hover (same as action01Hover)
+    toolbarButtonActive: 'active01',    // Toolbar button active/pressed state
+    toolbarIcon: 'icon01',              // Toolbar icon color
+    toolbarIconHover: 'icon01',         // Toolbar icon hover state
+    toolbarIconActive: 'action01',      // Toolbar icon active/toggled state
+
+    // Overflow Menu (More Actions)
+    overflowMenuBackground: 'surface02',  // Overflow menu background
+    overflowMenuBorder: 'surface05',      // Overflow menu border
+    overflowMenuItemText: 'text01',       // Overflow menu item text
+    overflowMenuItemIcon: 'text01',       // Overflow menu item icon
+    overflowMenuItemHover: 'surface03',   // Overflow menu item hover background
+    overflowMenuItemDisabled: 'text03',   // Overflow menu item disabled text/icon
+    overflowMenuSeparator: 'ui03',        // Overflow menu group separator
+
+    // Participants Pane
+    participantsPaneBackground: 'surface02', // Participants list background
+    participantItemBackground: 'surface03',  // Individual participant item background
+    participantItemHover: 'hover05',         // Participant item hover
+    participantItemBorder: 'ui02',           // Participant item border
+    participantCounterBadge: 'ui02',         // Participant counter badge background
+    participantCounterText: 'text01',        // Participant counter text
+    participantModeratorLabel: 'text03',     // Moderator label text
+    participantSectionText: 'text02',        // Section header/subtitle text
+    participantActionButton: 'action02',     // Action button background
+    participantLinkText: 'link01',           // Link text color
+    participantWarningText: 'warning02',     // Warning text color
+    participantRaisedHandBadge: 'warning02', // Raised hand indicator background
+    participantRaisedHandIcon: 'icon04',     // Raised hand icon color
+
+    // Lobby
+    lobbyBackground: 'surface02',       // Lobby screen background (same as ui01)
+    lobbyPreviewBackground: 'surface03', // Video preview background (same as ui02)
+
+    // Speaker Stats
+    speakerStatsBackground: 'surface02',   // Speaker stats panel background
+    speakerStatsRowBackground: 'ui02',     // Individual stat row background
+    speakerStatsRowAlternate: 'ui03',      // Alternate row background
+    speakerStatsBorder: 'surface03',       // Speaker stats borders
+    speakerStatsHeaderBackground: 'ui09',  // Header background
+    speakerStatsSearchBackground: 'field01', // Search input background
+    speakerStatsSearchBorder: 'ui05',      // Search input border
+    speakerStatsSearchText: 'text01',      // Search input text
+    speakerStatsSearchPlaceholder: 'text03', // Search placeholder
+    speakerStatsSearchIcon: 'icon03',      // Search icon color
+    speakerStatsLabelText: 'text03',       // Label text color
+    speakerStatsSuccessBar: 'success02',   // Success/progress bar
+    speakerStatsAvatarLeft: 'surface05',   // Avatar background for participants who left
+
+    // Pre-meeting/Prejoin
+    preMeetingBackground: 'surface02',  // Pre-meeting screen container background
+    preMeetingPreview: 'ui01',          // Video preview in pre-meeting
+    prejoinDialogBackground: 'uiBackground', // Prejoin dialog background
+    prejoinPreviewBackground: 'uiBackground', // Prejoin video preview background (#040404)
+    prejoinDialogDelimiter: 'ui03',     // Prejoin dialog delimiter line
+    prejoinDialogDelimiterText: 'text01', // Prejoin dialog delimiter text
+    prejoinTitleText: 'text01',         // Prejoin title text color
+    prejoinRoomNameText: 'text01',      // Prejoin room name text color
+    prejoinWarningBackground: 'warning01', // Warning banner background
+    prejoinWarningText: 'text04',       // Warning banner text
+    prejoinRecordingWarningText: 'text03', // Recording warning text
+    prejoinActionButtonPrimary: 'action01', // Primary action button
+    prejoinActionButtonPrimaryHover: 'action01Hover', // Primary button hover
+    prejoinActionButtonPrimaryText: 'text01', // Primary button text
+    prejoinActionButtonSecondary: 'action02', // Secondary action button
+    prejoinActionButtonSecondaryHover: 'action02Hover', // Secondary button hover
+    prejoinActionButtonSecondaryText: 'text04', // Secondary button text
+    prejoinActionButtonDanger: 'actionDanger', // Danger button (leave)
+    prejoinActionButtonDisabled: 'disabled01', // Disabled button
+    prejoinCountryPickerBackground: 'ui01', // Country picker background
+    prejoinCountryPickerBorder: 'ui03', // Country picker border
+    prejoinCountryPickerText: 'text01', // Country picker text
+    prejoinCountryRowBackground: 'action03', // Country row background
+    prejoinCountryRowHover: 'action03Hover', // Country row hover
+    prejoinDeviceStatusOk: 'success01', // Device status OK background
+    prejoinDeviceStatusWarning: 'warning01', // Device status warning background
+    prejoinDeviceStatusText: 'uiBackground', // Device status text
+
+    // Notifications
+    notificationBackground: 'ui04',     // Notification background
+    notificationNormalIcon: 'action01', // Normal notification icon
+    notificationError: 'iconError',     // Error notification icon
+    notificationSuccess: 'success01',   // Success notification icon
+    notificationWarning: 'warning01',   // Warning notification icon
+    notificationText: 'text04',         // Notification text
+    notificationActionText: 'action01', // Notification action text
+    notificationErrorText: 'textError', // Error notification text
+    notificationActionFocus: 'action01', // Notification action focus outline
+    notificationCloseIcon: 'icon04',    // Notification close icon
+
+    // Forms/Inputs
+    inputBackground: 'field01',         // Input field background
+    inputBorder: 'surface03',           // Input field border (same as ui02)
+    inputText: 'textColor01',           // Input field text (same as text01)
+    inputPlaceholder: 'textColor02',    // Input placeholder text (same as text02)
+
+    // Breakout Rooms
+    breakoutRoomBackground: 'ui01',     // Breakout rooms panel background
+    breakoutRoomItemBackground: 'surface03', // Individual breakout room background
+    breakoutRoomArrowBackground: 'ui02', // Breakout room arrow container background
+
+    // Settings
+    settingsBackground: 'ui01',         // Settings dialog background
+    settingsSectionBackground: 'ui02',  // Settings section background
+    settingsTabText: 'text01',          // Settings tab text
+    settingsShortcutKey: 'surface05',   // Keyboard shortcut key background
+    settingsVideoPreviewBorder: 'action01Hover', // Video preview border (selected)
+    settingsErrorIcon: 'iconError',     // Error icon color
+
+    // Visitors
+    visitorsCountBadge: 'warning02',    // Visitors count badge background
+    visitorsCountText: 'uiBackground',  // Visitors count badge text
+    visitorsCountIcon: 'iconSvgFill',   // Visitors count icon
+    visitorsQueueBackground: 'ui01',    // Visitors queue panel background
+    visitorsQueueText: 'text01',        // Visitors queue text
+    visitorsArrowBackground: 'ui02',    // Visitors arrow container background
+
+    // Welcome Page
+    welcomeBackground: 'surface01',     // Welcome page background (same as uiBackground)
+    welcomeCard: 'surface02',           // Welcome page tab bar background
+    welcomeTabActive: 'icon01',         // Welcome page active tab icon
+    welcomeTabInactive: 'ui03',         // Welcome page inactive tab icon
+
+    // ----- Form Components -----
+
+    // Input
+    inputLabel: 'text01',                    // Input field label text
+    inputFieldBackground: 'ui02',            // Input field background color
+    inputFieldBorder: 'ui02',                // Input field border color
+    inputFieldText: 'text01',                // Input field text color
+    inputFieldPlaceholder: 'text02',         // Input field placeholder text
+    inputFieldDisabled: 'text03',            // Input field disabled text
+    inputFieldError: 'textError',            // Input field error state
+    inputFieldFocus: 'focus01',              // Input field focus outline
+    inputClearButton: 'transparent',         // Input clear button background
+    inputBottomLabel: 'text02',              // Input bottom label text
+    inputBottomLabelError: 'textError',      // Input bottom label error text
+
+    // Select
+    selectLabel: 'text01',                   // Select label text
+    selectBackground: 'ui02',                // Select background color
+    selectText: 'text01',                    // Select text color
+    selectDisabled: 'text03',                // Select disabled text
+    selectError: 'textError',                // Select error state
+    selectFocus: 'focus01',                  // Select focus outline
+    selectIcon: 'icon01',                    // Select dropdown icon (enabled)
+    selectIconDisabled: 'icon03',            // Select dropdown icon (disabled)
+    selectBottomLabel: 'text02',             // Select bottom label text
+    selectBottomLabelError: 'textError',     // Select bottom label error text
+
+    // MultiSelect
+    multiSelectBackground: 'ui01',           // MultiSelect dropdown background
+    multiSelectBorder: 'ui04',               // MultiSelect dropdown border
+    multiSelectItemText: 'text01',           // MultiSelect item text
+    multiSelectItemHover: 'ui02',            // MultiSelect item hover background
+    multiSelectItemDisabled: 'text03',       // MultiSelect disabled item text
+
+    // Checkbox
+    checkboxLabel: 'text01',                 // Checkbox label text
+    checkboxBorder: 'icon03',                // Checkbox border color
+    checkboxChecked: 'action01',             // Checkbox checked background
+    checkboxDisabledBackground: 'ui02',      // Checkbox disabled background
+    checkboxDisabledBorder: 'surface05',     // Checkbox disabled border
+    checkboxDisabledChecked: 'ui02',         // Checkbox disabled checked background
+    checkboxIcon: 'icon01',                  // Checkbox check icon (enabled)
+    checkboxIconDisabled: 'icon03',          // Checkbox check icon (disabled)
+
+    // Switch
+    switchBackground: 'ui01',                // Switch background (unchecked)
+    switchBackgroundOn: 'action01',          // Switch background (checked)
+    switchToggle: 'ui04',                    // Switch toggle circle
+    switchToggleDisabled: 'ui03',            // Switch toggle circle (disabled)
+    switchFocus: 'focus01',                  // Switch focus outline
+
+    // Tabs
+    tabText: 'text02',                       // Tab text (unselected)
+    tabTextHover: 'text01',                  // Tab text (hover)
+    tabTextSelected: 'text01',               // Tab text (selected)
+    tabTextDisabled: 'text03',               // Tab text (disabled)
+    tabBorder: 'ui05',                       // Tab bottom border (unselected)
+    tabBorderHover: 'ui10',                  // Tab bottom border (hover)
+    tabBorderSelected: 'action01',           // Tab bottom border (selected)
+    tabBorderDisabled: 'ui05',               // Tab bottom border (disabled)
+    tabFocus: 'focus01',                     // Tab focus outline
+    tabBadgeBackground: 'warning01',         // Tab count badge background
+    tabBadgeText: 'text04',                  // Tab count badge text
+
+    // ListItem
+    listItemText: 'text01',                  // List item text color
+    listItemBackground: 'ui01',              // List item default background
+    listItemHover: 'surface03',              // List item hover background
+    listItemHighlighted: 'surface03',        // List item highlighted/active background
+    listItemBoxShadow: 'ui02',               // List item actions box shadow color
+
+    // ClickableIcon
+    clickableIconBackground: 'transparent',  // Clickable icon background
+    clickableIconHover: 'ui02',              // Clickable icon hover background
+    clickableIconActive: 'ui03',             // Clickable icon active/pressed background
+    clickableIconFocus: 'focus01',           // Clickable icon focus outline
+
+    // Label
+    labelBackground: 'ui04',                 // Label default background
+    labelText: 'text01',                     // Label text color
+    labelWhiteBackground: 'ui08',            // Label white variant background
+    labelWhiteText: 'text04',                // Label white variant text
+    labelWhiteIcon: 'surface01',             // Label white variant icon
+
+    // Tooltip
+    tooltipBackground: 'uiBackground',       // Tooltip background color
+    tooltipText: 'text01',                   // Tooltip text color
+
+    // Polls
+    pollsBackground: 'surface03',            // Poll container background
+    pollsTitle: 'text01',                    // Poll title text
+    pollsSubtitle: 'text02',                 // Poll subtitle/secondary text
+    pollsQuestion: 'text01',                 // Poll question text
+    pollsAnswer: 'text01',                   // Poll answer text
+    pollsBarBackground: 'ui03',              // Poll results bar background
+    pollsBarPercentage: 'text01',            // Poll results percentage text
+    pollsVotersBackground: 'ui03',           // Poll voters list background
+    pollsVotersText: 'text01',               // Poll voters list text
+    pollsSeparator: 'ui03',                  // Poll section separator
+    pollsSendLabel: 'text01',                // Poll send button label
+    pollsSendDisabled: 'text03',             // Poll send button disabled label
+    pollsPaneBackground: 'ui01',             // Poll pane container background
+    pollsPaneBorder: 'ui05',                 // Poll pane border
+    pollsCreateBackground: 'uiBackground',   // Poll create dialog background
+    pollsCreateBorder: 'ui06',               // Poll create dialog border
+
+    // Video Quality / Slider
+    sliderKnob: 'text01',                    // Slider knob/thumb color
+    sliderTrack: 'text03',                   // Slider track color
+    sliderFocus: 'ui06',                     // Slider focus outline
+    videoQualityText: 'text01',              // Video quality dialog text
+    videoQualityBackground: 'surface02',     // Video quality dialog background
+
+    // Connection Indicator
+    connectionIndicatorLost: 'ui05',         // Connection indicator lost status
+    connectionIndicatorOther: 'action01',    // Connection indicator other status
+
+    // Device Selection
+    deviceSelectorBackground: 'ui01',        // Device selector background
+    deviceSelectorText: 'text01',            // Device selector text
+    deviceSelectorBorder: 'ui03',            // Device selector border
+    deviceSelectorTextBackground: 'uiBackground', // Device selector text-only background
+    deviceSelectorVideoPreview: 'uiBackground', // Device selector video preview background
+
+    // Invite / Dial-in
+    dialInBackground: 'ui01',                // Dial-in summary background
+    dialInText: 'text01',                    // Dial-in summary text
+    dialInSecondaryText: 'text02',           // Dial-in summary secondary text
+
+    // Reactions
+    reactionsMenuBackground: '#242528', // Reactions menu background
+    reactionsMenuBorder: 'ui02',             // Reactions menu border
+    reactionsMenuButtonToggled: 'surface01', // Reactions menu button toggled state background
+    reactionsMenuBoxShadow1: 'ui09',         // Reactions menu box shadow primary
+    reactionsMenuBoxShadow2: 'ui08',         // Reactions menu box shadow secondary
+
+    // Recording / Live Stream
+    recordingBackground: 'ui01',             // Recording panel background
+    recordingText: 'text01',                 // Recording panel text
+    recordingHighlightButton: 'ui04',        // Recording highlight button background
+    recordingHighlightButtonDisabled: 'text02', // Recording highlight button disabled background
+    recordingHighlightButtonIcon: 'ui02',    // Recording highlight button icon color
+    recordingHighlightButtonIconDisabled: 'text03', // Recording highlight button disabled icon color
+    recordingNotificationText: 'surface01',  // Recording notification text color
+    recordingNotificationAction: 'action01', // Recording notification action color
+    transcriptionIndicator: 'success01',     // Transcription indicator background
+
+    // Virtual Background
+    virtualBackgroundBackground: 'ui01',     // Virtual background picker background
+    virtualBackgroundText: 'text01',         // Virtual background picker text
+    virtualBackgroundBorder: 'ui03',         // Virtual background item border
+    virtualBackgroundPreview: 'uiBackground', // Virtual background preview container
+
+    // Conference / Meeting
+    conferenceTimerText: 'text01',           // Conference timer text
+    conferenceSubjectText: 'text01',         // Conference subject text
+    conferenceNoticeBackground: 'uiBackground', // Conference notice background
+    conferenceNoticeText: 'text01',          // Conference notice text
+    conferenceRaisedHandLabelText: 'uiBackground', // Raised hands count label text
+    conferenceRaisedHandLabelIcon: 'surface01', // Raised hands count label icon
+
+    // Time-timer pill
+    timeTimerNameSegmentBackground: 'timeTimerNameSegment',
+    timeTimerTimerSegmentBackground: 'timeTimerTimerSegment',
+    timeTimerElapsedText: 'timeTimerElapsedText',
+    timeTimerDisk: 'timeTimerDisk',
+    timeTimerWarning: 'timeTimerWarning',
+    timeTimerWarningNameSegmentBackground: 'timeTimerWarningNameSegment',
+    timeTimerWarningTimerSegmentBackground: 'timeTimerWarningTimerSegment',
+    timeTimerExpiredText: 'timeTimerExpiredText',
+    timeTimerExpiredNameSegmentBackground: 'timeTimerExpiredNameSegment',
+    timeTimerExpiredTimerSegmentBackground: 'timeTimerExpiredTimerSegment',
+    timeTimerExpiredDisk: 'timeTimerExpiredDisk',
+    timeTimerExpiredOverrunEdge: 'timeTimerExpiredOverrunEdge',
+    timeTimerExpiredNotificationText: 'timeTimerExpiredNotificationText',
+
+    // Subtitle Messages
+    subtitleMessageBackground: 'ui02',       // Subtitle message background
+    subtitleMessageText: 'text01',           // Subtitle message text
+    subtitleMessageSender: 'text02',         // Subtitle message sender name
+    subtitleMessageTime: 'text03',           // Subtitle message timestamp
+
+    // Language Selector
+    languageSelectorBackground: 'ui01',      // Language selector background
+    languageSelectorText: 'text01',          // Language selector text
+    languageSelectorHover: 'ui02',           // Language selector item hover
+
+    // Video Menu
+    videoMenuBackground: 'ui01',             // Video menu background
+    videoMenuBorder: 'ui02',                 // Video menu border
+    videoMenuText: 'text01',                 // Video menu text
+    videoMenuSliderBackground: 'ui03',       // Video menu slider background
+
+    // File Sharing
+    fileSharingBackground: 'ui01',           // File sharing panel background
+    fileSharingText: 'text01',               // File sharing text
+    fileSharingEmptyText: 'text02',          // File sharing empty state text
+    fileSharingEmptyIcon: 'icon03',          // File sharing empty state icon
+    fileSharingItemBackground: 'surface03',  // File sharing item background
+    fileSharingItemBorder: 'ui02',           // File sharing item hover/border
+
+    // Gifs
+    gifsBackground: '#242528',                  // GIFs panel background
+    gifsText: 'text01',                      // GIFs panel text
+
+    // Whiteboard
+    whiteboardBackground: 'ui03',            // Whiteboard background
+    whiteboardText: 'text01',                // Whiteboard panel text
+
+    // Salesforce
+    salesforceSearchBackground: 'field01',   // Salesforce search input background
+    salesforceSearchBorder: 'ui05',          // Salesforce search input border
+    salesforceSearchText: 'dialogText',      // Salesforce search input text
+    salesforceSearchPlaceholder: 'text03',   // Salesforce search placeholder
+    salesforceSearchIcon: 'text03',          // Salesforce search icon
+
+    // Security Dialog
+    securityDialogBackground: 'ui01',        // Security dialog background
+    securityDialogText: 'text01',            // Security dialog text
+    securityDialogSecondaryText: 'text02',   // Security dialog secondary text
+    securityDialogBorder: 'ui07',            // Security dialog border color
+
+    // Deep Linking
+    deepLinkingBackground: 'uiBackground',   // Deep linking page content pane background (#1e1e1e)
+    deepLinkingBorder: 'ui03',               // Deep linking page content pane border
+    deepLinkingText: 'text01',               // Deep linking page text
+    deepLinkingSeparator: 'ui03',            // Deep linking separator line
+    deepLinkingLabelText: 'text02',          // Deep linking label text
+    deepLinkingLink: 'link01',               // Deep linking link color
+
+    // Base React Components
+    baseReactBackground: 'ui01',             // Base react component background
+    baseReactText: 'text01',                 // Base react component text
+    baseReactBorder: 'ui03',                 // Base react component border
+
+    // Inline Dialog
+    inlineDialogBackground: 'ui01',          // Inline dialog background
+    inlineDialogText: 'text01',              // Inline dialog text
+    inlineDialogBorder: 'ui02',              // Inline dialog border
+
+    // Pre-meeting / Action Button
+    actionButtonBackground: 'ui01',          // Action button background (different from main buttons)
+    actionButtonText: 'text01',              // Action button text
+    actionButtonBorder: 'ui03',              // Action button border
+
+    // Audio Route Picker
+    audioRoutePickerBackground: 'ui01',      // Audio route picker background
+    audioRoutePickerText: 'text01',          // Audio route picker text
+    audioRoutePickerBorder: 'ui03',          // Audio route picker border
+
+    // Etherpad
+    etherpadBackground: 'ui01',              // Etherpad panel background
+    etherpadText: 'text01',                  // Etherpad panel text
+
+    // Display Name
+    displayNameBackground: 'ui01',           // Display name background
+    displayNameText: 'text01',               // Display name text
+
+    // Car Mode
+    carModeBackground: 'ui01',               // Car mode background
+    carModeText: 'text01',                   // Car mode text
+    carModeBorder: 'ui03',                   // Car mode border
+
+    // ----- Links -----
+
+    link01: 'action01',
+    link01Hover: 'hover07',
+    link01Active: 'action04',
+
+    // ----- Text -----
+
+    // Primary
+    text01: 'textColor01',
+
+    // Secondary
+    text02: 'textColor02',
+
+    // Tertiary
+    text03: 'ui03',
+
+    // High-contrast
+    text04: 'surface01',
+
+    // Error
+    textError: 'alertRed',
+
+    // ----- Icons -----
+
+    // Primary
+    icon01: 'icon01',
+
+    // Secondary
+    icon02: 'ui21',
+
+    // Tertiary
+    icon03: 'icon07',
+
+    // High-contrast
+    icon04: 'surface01',
+
+    // SVG fill color
+    iconSvgFill: 'icon01',
+
+    // Error
+    iconError: 'action03',
+
+    // Normal
+    iconNormal: 'action04',
+
+    // Success
+    iconSuccess: 'alertGreen',
+
+    // Warning
+    iconWarning: 'warning01',
+
+    // ----- Forms -----
+
+    field01: 'ui02',
+
+    // ----- Feedback -----
+
+    // Success
+    success01: 'success05',
+    success02: 'success01',
+
+    // Warning
+    warning01: 'warning01',
+    warning02: 'warning06',
+
+    // ----- Support -----
+
+    support05: 'support05',
+    support06: 'support06'
+};
+
+
+export const font = {
+    weightRegular: 400,
+    weightSemiBold: 600
+};
+
+export const shape = {
+    borderRadius: 6,
+    circleRadius: 50,
+    boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.15)'
+};
+
+export const spacing = [ 0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120, 128 ];
+
+export const typography = {
+    labelRegular: 'label01',
+
+    labelBold: 'labelBold01',
+
+    bodyShortRegularSmall: {
+        fontSize: '0.625rem',
+        lineHeight: '1rem',
+        fontWeight: font.weightRegular,
+        letterSpacing: 0
+    },
+
+    bodyShortRegular: {
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+        fontWeight: font.weightRegular,
+        letterSpacing: 0
+    },
+
+    bodyShortBold: {
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+        fontWeight: font.weightSemiBold,
+        letterSpacing: 0
+    },
+
+    bodyShortRegularLarge: {
+        fontSize: '1rem',
+        lineHeight: '1.375rem',
+        fontWeight: font.weightRegular,
+        letterSpacing: 0
+    },
+
+    bodyShortBoldLarge: {
+        fontSize: '1rem',
+        lineHeight: '1.375rem',
+        fontWeight: font.weightSemiBold,
+        letterSpacing: 0
+    },
+
+    bodyLongRegular: {
+        fontSize: '0.875rem',
+        lineHeight: '1.5rem',
+        fontWeight: font.weightRegular,
+        letterSpacing: 0
+    },
+
+    bodyLongRegularLarge: {
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
+        fontWeight: font.weightRegular,
+        letterSpacing: 0
+    },
+
+    bodyLongBold: {
+        fontSize: '0.875rem',
+        lineHeight: '1.5rem',
+        fontWeight: font.weightSemiBold,
+        letterSpacing: 0
+    },
+
+    bodyLongBoldLarge: {
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
+        fontWeight: font.weightSemiBold,
+        letterSpacing: 0
+    },
+
+    heading1: 'heading01',
+
+    heading2: 'heading02',
+
+    heading3: {
+        fontSize: '2rem',
+        lineHeight: '2.5rem',
+        fontWeight: font.weightSemiBold,
+        letterSpacing: 0
+    },
+
+    heading4: {
+        fontSize: '1.75rem',
+        lineHeight: '2.25rem',
+        fontWeight: font.weightSemiBold,
+        letterSpacing: 0
+    },
+
+    heading5: {
+        fontSize: '1.25rem',
+        lineHeight: '1.75rem',
+        fontWeight: font.weightSemiBold,
+        letterSpacing: 0
+    },
+
+    heading6: {
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
+        fontWeight: font.weightSemiBold,
+        letterSpacing: 0
+    }
+};
+
+export const breakpoints = {
+    values: {
+        '0': 0,
+        '320': 320,
+        '400': 400,
+        '480': 480
+    }
+};