wolfskin/wolfskin-design/tokens.css

311 lines
11 KiB
CSS

/* Generated from the locked TV token sources. */
:root {
--color-bg: #07070a;
--color-surface: #13131a;
--color-surface2: #1b1b25;
--color-surface3: #252532;
--color-fg: #f4f4f6;
--color-muted: #f4f4f6bd;
--color-dim: #f4f4f68f;
--color-border: #ffffff1a;
--color-accent: #cc9fff;
--color-accentSoft: #2c1a3f;
--color-accentText: #e4cbff;
--color-ok: #89da9b;
--color-warn: #f4c26a;
--color-fail: #f97770;
--color-onFocus: #0b0b10;
--color-buttonSecondary: #ffffff24;
--color-buttonSecondaryFocused: #ffffff42;
--color-titleButtonSecondary: #2c2c38c7;
--color-titleButtonSecondaryFocused: #464654e6;
--color-chipRest: #ffffff1a;
--color-navBlobRest: #ffffff1a;
--color-listRowRest: #ffffff0d;
--color-sheetScrim: #0000009e;
--color-badgeRest: #07070abf;
--color-badgeWatched: #f4f4f6d9;
--color-progressTrack: #ffffff38;
--color-railEmpty: #f4f4f638;
--personColor-justin: #62c4ff;
--personColor-mindel: #ff9d72;
--personColor-shared: #9be38f;
--gradient-heroScrim: linear-gradient(90deg,rgb(7 7 10 / .92) 0%,rgb(7 7 10 / .55) 42%,rgb(7 7 10 / 0) 70%),linear-gradient(0deg,var(--bg) 0%,rgb(7 7 10 / .6) 26%,rgb(7 7 10 / 0) 48%);
--gradient-detailScrim: linear-gradient(90deg,rgb(7 7 10 / .94) 0%,rgb(7 7 10 / .6) 46%,rgb(7 7 10 / .05) 75%),linear-gradient(0deg,var(--bg) 0%,rgb(7 7 10 / .35) 34%,rgb(7 7 10 / 0) 55%);
--gradient-navBand: linear-gradient(180deg,rgb(7 7 10 / .72),rgb(7 7 10 / 0));
--gradient-navBandSolid: linear-gradient(180deg,var(--bg) 0%,var(--bg) 84%,rgb(7 7 10 / 0) 100%);
--gradient-ratingPlate: linear-gradient(180deg,rgb(7 7 10 / .9) 0%,rgb(7 7 10 / .72) 52%,rgb(7 7 10 / 0) 100%);
--gradient-tileOverlay: linear-gradient(0deg,rgb(7 7 10 / .92),rgb(7 7 10 / 0));
--gradient-fallbackArt: linear-gradient(160deg,hsl(var(--h,260) 22% 22%),hsl(var(--h,260) 26% 10%));
--gradient-entryTile: linear-gradient(150deg,hsl(var(--h) 30% 26%),hsl(var(--h) 30% 12%));
--gradient-initialsCircle: linear-gradient(160deg,hsl(var(--h) 24% 30%),hsl(var(--h) 26% 14%));
--type-displayDetail: 88.0px;
--type-displayHero: 84.0px;
--type-screenTitle: 64.0px;
--type-sectionTitle: 56.0px;
--type-sheetTitle: 44.0px;
--type-wordmark: 36.0px;
--type-stateTitle: 36.0px;
--type-rowHeading: 34.0px;
--type-pickerName: 34.0px;
--type-nav: 30.0px;
--type-listTitle: 30.0px;
--type-body: 28.0px;
--type-button: 28.0px;
--type-label: 26.0px;
--type-caption: 24.0px;
--type-ratingPlate: 28.0px;
--radius-card: 16.0px;
--radius-button: 38.0px;
--radius-chip: 34.0px;
--radius-navItem: 32.0px;
--radius-listRow: 24.0px;
--radius-panel: 22.0px;
--radius-menu: 26.0px;
--radius-heroSheet: 18.0px;
--radius-cardSheet: 10.0px;
--radius-thumb: 12.0px;
--radius-pill: 22.0px;
--radius-progress: 4.0px;
--layout-safeSide: 96.0px;
--layout-contentWidth: 1728.0px;
--layout-safeTopPicker: 54.0px;
--layout-navBand: 150.0px;
--layout-navPaddingTop: 44.0px;
--layout-navItemHeight: 64.0px;
--layout-navItemPaddingX: 26.0px;
--layout-navItemGap: 12.0px;
--layout-wordmarkGap: 40.0px;
--layout-navUnderline: 4.0px;
--layout-navBlobAvatarPad: 8.0px;
--layout-navSolidAfter: 40.0px;
--layout-pinnedLine: 168.0px;
--layout-windowAhead: 700.0px;
--layout-rowHeadingBand: 60.0px;
--layout-rowGapAfter: 44.0px;
--layout-gridRowGap: 28.0px;
--layout-row_hero: 820.0px;
--layout-row_phero: 740.0px;
--layout-row_section: 150.0px;
--layout-row_chips: 104.0px;
--layout-row_note: 84.0px;
--layout-row_state: 300.0px;
--layout-row_lhead: 236.0px;
--layout-row_dhead: 900.0px;
--layout-row_phead: 470.0px;
--layout-row_gh: 84.0px;
--layout-row_endcta: 200.0px;
--layout-row_srow: 124.0px;
--layout-heroCopyLeft: 96.0px;
--layout-heroCopyBottom: 110.0px;
--layout-heroCopyWidth: 1000.0px;
--layout-heroOverviewMax: 960.0px;
--layout-detailCopyTop: 200.0px;
--layout-detailCopyWidth: 1060.0px;
--layout-buttonHeight: 76.0px;
--layout-buttonPaddingX: 38.0px;
--layout-buttonGap: 20.0px;
--layout-buttonIcon: 30.0px;
--layout-iconButton: 76.0px;
--layout-iconCaptionLine: 38.0px;
--layout-sheetWidth: 800.0px;
--layout-sheetRow: 100.0px;
--layout-stateWidth: 1100.0px;
--layout-captionOffset: 18.0px;
--layout-badge: 48.0px;
--layout-badgeInset: 14.0px;
--layout-progressBar: 8.0px;
--layout-pickerAvatar: 220.0px;
--layout-pickerGap: 90.0px;
--layout-pickerStackGap: 70.0px;
--layout-gear: 56.0px;
--layout-navAvatar: 64.0px;
--layout-castCircle: 200.0px;
--layout-personPortrait: 240.0px;
--motion-fast: 140ms;
--motion-base: 160ms;
--motion-scroll: 180ms;
--motion-ratingDwell: 350ms;
--motion-toast: 3200ms;
--requests-sheetPaddingY: 80.0px;
--requests-sheetPaddingX: 64.0px;
--requests-sheetGap: 18.0px;
--requests-sheetTitleLineHeight: 56.0px;
--requests-sheetTitleBaseline: 44.0px;
--requests-titleLineHeight: 39.0px;
--requests-titleBaseline: 31.0px;
--requests-factsLineHeight: 31.2px;
--requests-factsBaseline: 24.0px;
--requests-stageLineHeight: 39.6px;
--requests-stageLabelLineHeight: 33.8px;
--requests-stageBaseline: 24.0px;
--requests-emptyMargin: 20.0px;
--requests-rowPaddingY: 14.0px;
--requests-rowPaddingX: 18.0px;
--requests-rowGap: 24.0px;
--requests-listGap: 6.0px;
--requests-stageMargin: 4.0px;
--requests-stageGlyph: 28.0px;
--requests-stageGap: 10.0px;
--requests-readinessGapX: 22.0px;
--requests-readinessGapY: 10.0px;
--requests-readinessMargin: 8.0px;
--requests-readinessGlyph: 26.0px;
--requests-chevron: 30.0px;
--requests-receiptPaddingY: 28.0px;
--requests-receiptPaddingX: 30.0px;
--requests-receiptGap: 10.0px;
--requests-receiptGlyph: 36.0px;
--requests-buttonMargin: 12.0px;
--requests-skeletonTitleWidth: 360.0px;
--requests-skeletonTitleHeight: 34.0px;
--requests-skeletonSubtitleWidth: 240.0px;
--requests-skeletonSubtitleHeight: 26.0px;
--requests-skeletonGap: 12.0px;
--requests-ratingsGap: 20.0px;
--requests-ratingsEntryGap: 8.0px;
--requests-shadowBlur: 80.0px;
--requests-shadowOffset: -30.0px;
--requests-shadowColor: #00000080;
--shell-navLabelFade: 200ms;
--shell-zero: 0.0px;
--shell-stageWidth: 1920.0px;
--shell-stageHeight: 1080.0px;
--shell-wordmarkWidth: 169.0px;
--shell-wordmarkTop: 73.6px;
--shell-navHomeWidth: 149.0px;
--shell-navDiscoverWidth: 198.0px;
--shell-navMoviesWidth: 171.0px;
--shell-navShowsWidth: 161.0px;
--shell-navAnimeWidth: 158.0px;
--shell-navItemTop: 65.0px;
--shell-pickerTitleTop: 272.3px;
--shell-pickerPeopleTop: 425.5px;
--shell-pickerNameGap: 26.0px;
--shell-pickerGearTop: 751.7px;
--shell-pickerGearCaptionTop: 72.0px;
--shell-pickerLetter: 100.0px;
--shell-pickerSkeletonNameWidth: 140.0px;
--shell-pickerSkeletonNameHeight: 40.0px;
--shell-pickerLoadingTitleTop: 247.4px;
--shell-pickerLoadingPeopleTop: 400.6px;
--shell-pickerLoadingButtonTop: 756.6px;
--shell-pickerErrorTitleTop: 297.6px;
--shell-pickerErrorPanelTop: 450.8px;
--shell-pickerErrorPanelWidth: 980.0px;
--shell-pickerErrorPanelHeight: 185.6px;
--shell-pickerErrorButtonTop: 706.4px;
--shell-settingsHeaderTop: 150.0px;
--shell-settingsHeaderAvatar: 52.0px;
--shell-settingsHeaderGap: 24.0px;
--shell-settingsRowTop: 10.0px;
--shell-settingsRowPadding: 30.0px;
--shell-settingsRowGap: 24.0px;
--shell-settingsIcon: 36.0px;
--shell-settingsPillHeight: 40.0px;
--shell-settingsPillStroke: 2.0px;
--shell-settingsPillBorder: #ffffff38;
--shell-settingsPillFocusedBorder: #0b0b1066;
--shell-settingsPillPadding: 16.0px;
--shell-settingsPillGap: 12.0px;
--shell-settingsChevron: 30.0px;
--shell-settingsEndPadding: 620.0px;
--shell-panelPaddingX: 30.0px;
--shell-panelPaddingY: 28.0px;
--shell-panelGap: 10.0px;
--shell-panelHeadingGap: 14.0px;
--shell-panelIcon: 36.0px;
--shell-skeletonRadius: 10.0px;
--library-chipHeight: 68.0px;
--library-chipPadding: 28.0px;
--library-chipGap: 16.0px;
--library-chipTop: 16.0px;
--library-chipIcon: 26.0px;
--library-captionWidth: 640.0px;
--library-plateTop: 14.0px;
--library-plateSide: 16.0px;
--library-plateBottom: 46.0px;
--library-plateFloor: 24.0px;
--library-railWidth: 52.0px;
--library-railLetterHeight: 30.0px;
--library-railFocusHeight: 44.0px;
--library-railLetter: 24.0px;
--library-railFocusedLetter: 28.0px;
--library-panelPaddingX: 40.0px;
--library-panelPaddingY: 34.0px;
--library-panelTextGap: 24.0px;
--library-panelTitleGap: 8.0px;
--library-panelIconGap: 14.0px;
--library-panelTop: 20.0px;
--library-borderWidth: 2.0px;
--library-chipContentGap: 12.0px;
--library-tailIcon: 44.0px;
--library-tailPadding: 20.0px;
--library-tailGap: 10.0px;
--library-fallbackPadding: 22.0px;
--library-fallbackIcon: 44.0px;
--home-kickerGap: 12.0px;
--home-kickerBottom: 10.0px;
--home-titleBottom: 16.0px;
--home-factsHeight: 38.0px;
--home-factsBottom: 14.0px;
--home-factsGap: 22.0px;
--home-overviewBottom: 30.0px;
--home-cardPadding: 22.0px;
--home-cardOverlayTop: 54.0px;
--home-cardOverlayBottom: 18.0px;
--home-sectionTop: 40.0px;
--home-sectionAvatar: 56.0px;
--home-sectionGap: 22.0px;
--home-stateTextBottom: 24.0px;
--home-stateTop: 20.0px;
--home-statePaddingX: 40.0px;
--home-statePaddingY: 34.0px;
--home-stateGap: 8.0px;
--home-stateIcon: 36.0px;
--home-captionWidth: 640.0px;
--home-plateTop: 14.0px;
--home-plateSide: 16.0px;
--home-plateFade: 46.0px;
--home-ratingGap: 20.0px;
--home-ratingMarkGap: 8.0px;
--home-heroSkeletonWidth: 640.0px;
--home-heroSkeletonHeight: 84.0px;
--home-heroSkeletonFactsWidth: 460.0px;
--home-heroSkeletonFactsHeight: 34.0px;
--home-heroSkeletonButtonWidth: 260.0px;
--home-heroSkeletonGap: 22.0px;
--home-heroSkeletonButtonGap: 40.0px;
--home-artGlyph: 44.0px;
--home-cardSheetLeft: 22.0px;
--home-cardSheetTop: 18.0px;
--home-cardSheetInset: 36.0px;
--home-heroSheetRight: 180.0px;
--home-heroSheetTop: 150.0px;
--home-cardBlur: 26.0px;
--home-heroBlur: 60.0px;
--home-progressInset: 18.0px;
--home-progressBottom: 10.0px;
--home-endTop: 40.0px;
--home-frameBottom: 80.0px;
--home-seeAllGap: 8.0px;
--home-seeAllIcon: 48.0px;
--home-toastPadding: 28.0px;
--home-toastTop: 150.0px;
--home-toastWidth: 760.0px;
--home-cardWashInset: 30.0px;
--home-heroWashInset: 80.0px;
--home-noteTop: 14.0px;
--home-noteGap: 16.0px;
--home-hairline: 2.0px;
--home-savedHeight: 52.0px;
--home-savedPadding: 20.0px;
--home-savedGap: 10.0px;
--home-savedIcon: 28.0px;
--home-savedRadius: 28.0px;
--home-cardLiftOffset: 18.0px;
--home-cardLiftBlur: 50.0px;
--home-buttonLiftOffset: 12.0px;
--home-buttonLiftBlur: 40.0px;
--home-posterProgressBottom: 12.0px;
}