@flitsmeister/design-system 2.2.36 → 3.0.1

package/web/styles/flashmaster/sample_fmdx_android.xml

@@ -1,223 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <!-- Main colors -->
-    <color name="fmx_green">#39A049</color>
-    <color name="fmx_red">#f24d4d</color>
-    <color name="fmx_orange">#ff8b17</color>
-    <color name="fmx_yellow">#ffbe17</color>
-    <color name="fmx_purple">#cf66eb</color>
-    <color name="fmx_blurple">#386bff</color>
-    <color name="fmx_lightblue">#1eb3ff</color>
-    <color name="fmx_blue">#007fe8</color>
-
-    <!-- Main dark mode colors -->
-    <color name="fmx_green_night">#38A849</color>
-    <color name="fmx_red_night">#FA4848</color>
-    <color name="fmx_orange_night">#FE942A</color>
-    <color name="fmx_yellow_night">#FFC60D</color>
-    <color name="fmx_purple_night">#D66BF2</color>
-    <color name="fmx_blurple_night">#2E74FF</color>
-    <color name="fmx_lightblue_night">#17B9FF</color>
-    <color name="fmx_blue_night">#0086F5</color>
-
-    <!-- Parking feature colors //-->
-    <color name="fmx_parking_blue">#066CBF</color>
-    <!-- color-foreground-contentAttention //-->
-    <color name="fmx_parking_licence_plate_background_nl">#FFCC00</color>
-    <!-- color-background-surfaceDefaultHigher //-->
-    <color name="fmx_parking_licence_plate_background_other">#F0F1F2</color>
-    <!-- color-outline-outlineDefault //-->
-    <color name="fmx_parking_licence_plate_border_nl">#1A000000</color>
-    <!-- color-special-firetruck //-->
-    <color name="fmx_parking_licence_plate_border_be">#C92A2A</color>
-    <!-- color-outline-outlineDanger //-->
-    <color name="fmx_parking_licence_plate_border_atdk">#F24D4D</color>
-    <!-- color-outline-outlineStrongest //-->
-    <color name="fmx_parking_licence_plate_border_other">#161616</color>
-    <!-- color-utility-systemBlack //-->
-    <color name="fmx_parking_licence_plate_text_nl">#000000</color>
-    <!-- color-special-firetruck //-->
-    <color name="fmx_parking_licence_plate_text_be">#C92A2A</color>
-    <!-- color-foreground-contentDefault //-->
-    <color name="fmx_parking_licence_plate_text_other">#161616</color>
-
-    <color name="fmx_whatsnew_blue_light">#0193EA</color>
-    <color name="fmx_whatsnew_blue">#0060D4</color>
-    <color name="fmx_whatsnew_orange_light">#FFA11B</color>
-    <color name="fmx_whatsnew_orange">#FF7C14</color>
-
-    <!-- Grays -->
-    <color name="fmx_white">#ffffff</color>
-    <color name="fmx_gray_100">#f0f1f2</color>
-    <color name="fmx_gray_200">#e1e3e5</color>
-    <color name="fmx_gray_300">#cbcfd2</color>
-    <color name="fmx_gray_400">#aab1b6</color>
-    <color name="fmx_gray_500">#6a747b</color>
-    <color name="fmx_gray_600">#40464a</color>
-    <color name="fmx_gray_700">#2B2F32</color>
-    <color name="fmx_gray_800">#1D1F20</color>
-    <color name="fmx_gray_900">#161616</color>
-    <color name="fmx_black">#000000</color>
-    <color name="fmx_lighter_blue">#CBE4FB</color>
-
-    <!-- Grays dark mode -->
-    <color name="fmx_white_to_fmx_black">@color/fmx_white</color>
-    <color name="fmx_white_to_fmx_gray_800">@color/fmx_white</color>
-    <color name="fmx_white_to_fmx_gray_900">@color/fmx_white</color>
-    <color name="fmx_black_to_fmx_gray_100">@color/fmx_black</color>
-    <color name="fmx_gray_900_to_fmx_gray_100">@color/fmx_gray_900</color>
-    <color name="fmx_gray_100_to_fmx_gray_900">@color/fmx_gray_100</color>
-    <color name="fmx_gray_100_to_fmx_black">@color/fmx_gray_100</color>
-    <color name="fmx_gray_100_to_fmx_gray_700">@color/fmx_gray_100</color>
-    <color name="fmx_gray_100_to_fmx_gray_800">@color/fmx_gray_100</color>
-    <color name="fmx_gray_200_to_fmx_gray_800">@color/fmx_gray_200</color>
-    <color name="fmx_gray_500_to_fmx_gray_400">@color/fmx_gray_500</color>
-
-    <!-- Feature colors -->
-    <color name="pro_purple_primary">#b638ed</color>
-    <color name="pro_purple_secondary">#601ad0</color>
-    <color name="pro_purple_tertiary">#c9b2dd</color>
-    <color name="pro_error_dialog_background">#2b224e</color>
-    <color name="start_gradient_start">#29007FE8</color>
-    <color name="start_gradient_end">#00007FE8</color>
-    <color name="pro_neutral_gradient_start">#FFFFFF</color>
-    <color name="pro_neutral_gradient_mid">#03FFFFFF</color>
-    <color name="pro_neutral_gradient_end">#03FFFFFF</color>
-    <color name="pro_neutral_gradient_subdued_start">#33FFFFFF</color>
-    <color name="pro_neutral_gradient_subdued_end">#01FFFFFF</color>
-    <color name="pro_standard_gradient_start">#AE40F2</color>
-    <color name="pro_standard_gradient_mid">#4F19E9</color>
-    <color name="pro_standard_gradient_end">#004F19E9</color>
-    <color name="pro_plus_gradient_start">#724899</color>
-    <color name="pro_plus_gradient_end">#004A345F</color>
-    <color name="pro_title_gradient_start">#386bff</color>
-    <color name="pro_title_gradient_end">#a738ff</color>
-    <color name="pro_label_color">#AE61FA</color>
-    <color name="fmx_green_signal">#9fff53</color>
-
-    <!-- Colors with alpha -->
-    <color name="fmx_red_15">#26F24D4D</color>
-    <color name="fmx_black_30">#4D000000</color>
-    <color name="fmx_white_40">#66FFFFFF</color>
-
-    <!-- Colors with alpha dark mode -->
-    <color name="fmx_black_30_to_fmx_white_40">@color/fmx_black_30</color>
-
-    <!-- Surface default colors - Light -->
-    <color name="surface_default_highest_light">#FFFFFF</color>
-    <color name="surface_default_higher_light">#F0F1F2</color>
-    <color name="surface_default_default_light">#E1E3E5</color>
-    <color name="surface_default_lower_light">#2B2F32</color>
-    <color name="surface_default_lowest_light">#161616</color>
-
-    <!-- Surface default colors - Dark -->
-    <color name="surface_default_highest_dark">#2B2F32</color>
-    <color name="surface_default_higher_dark">#1D1F20</color>
-    <color name="surface_default_default_dark">#161616</color>
-    <color name="surface_default_lower_dark">#0D0D0D</color>
-    <color name="surface_default_lowest_dark">#000000</color>
-
-    <!-- Surface brand colors - Light-->
-    <color name="surface_brand_light">#FF007FE8</color>
-    <color name="surface_brand_alt_light">#FFD0EBFF</color>
-    <color name="surface_pro_light">#AE61FA</color>
-    <color name="surface_pro_alt_light">#F3D9FA</color>
-    <color name="surface_pro_plus_light">#724899</color>
-
-    <!-- Surface brand colors - Dark-->
-    <color name="surface_brand_dark">#0086F5</color>
-    <color name="surface_brand_alt_dark">#273744</color>
-    <color name="surface_pro_dark">#AE61FA</color>
-    <color name="surface_pro_alt_dark">#862E9C</color>
-    <color name="surface_pro_plus_dark">#724899</color>
-
-    <!-- Surface functional colors - Light-->
-    <color name="surface_danger_light">#F24D4D</color>
-    <color name="surface_danger_alt_light">#FFE3E3</color>
-    <color name="surface_warning_light">#FF8B17</color>
-    <color name="surface_warning_alt_light">#FFBE17</color>
-    <color name="surface_attention_light">#FFCC00</color>
-    <color name="surface_info_light">#386BFF</color>
-    <color name="surface_info_alt_light">#DBE4FF</color>
-    <color name="surface_success_light">#39A049</color>
-    <color name="surface_success_alt_light">#D3F9D8</color>
-
-    <!-- Surface functional colors - Dark-->
-    <color name="surface_danger_dark">#FA4848</color>
-    <color name="surface_danger_alt_dark">#492728</color>
-    <color name="surface_warning_dark">#FD7E14</color>
-    <color name="surface_warning_alt_dark">#D9480F</color>
-    <color name="surface_attention_dark">#FFCC00</color>
-    <color name="surface_info_dark">#2E74FF</color>
-    <color name="surface_info_alt_dark">#364FC7</color>
-    <color name="surface_success_dark">#38A849</color>
-    <color name="surface_success_alt_dark">#2B8A3E</color>
-
-    <!-- Surface Decorative colors - Light -->
-    <color name="surface_parking_light">#066CBF</color>
-    <color name="surface_police_light">#0C469E</color>
-    <color name="surface_firetruck_light">#C92A2A</color>
-    <color name="surface_signal_light">#9FFF53</color>
-    <color name="surface_speedcam_light">#1EB3FF</color>
-    <color name="surface_ambulance_light">#FFEB12</color>
-    <color name="surface_emergency_light">#FAFF12</color>
-    <color name="surface_nWeg_light">#FFCC00</color>
-    <color name="surface_scrim_light">#A8000000</color>
-    <color name="surface_gradient_gerrit_start_light">#C2D84D</color>
-    <color name="surface_gradient_gerrit_end_light">#7DB527</color>
-    <color name="surface_gradient_pro_start_light">#AE40F2</color>
-    <color name="surface_gradient_pro_end_light">#4F19E9</color>
-
-    <!-- Surface Decorative colors - Dark -->
-    <color name="surface_parking_dark">#066CBF</color>
-    <color name="surface_police_dark">#0C469E</color>
-    <color name="surface_firetruck_dark">#C92A2A</color>
-    <color name="surface_signal_dark">#9FFF53</color>
-    <color name="surface_speedcam_dark">#1EB3FF</color>
-    <color name="surface_ambulance_dark">#FFEB12</color>
-    <color name="surface_emergency_dark">#FAFF12</color>
-    <color name="surface_nWeg_dark">#FFEB12</color>
-    <color name="surface_scrim_dark">#A8000000</color>
-    <color name="surface_gradient_gerrit_start_dark">#C2D84D</color>
-    <color name="surface_gradient_gerrit_end_dark">#7DB527</color>
-    <color name="surface_gradient_pro_start_dark">#AE40F2</color>
-    <color name="surface_gradient_pro_end_dark">#4F19E9</color>
-
-    <!-- foreground neutral colors - Light-->
-    <color name="foreground_default_disabled_light">#161616</color>
-    <color name="foreground_default_light">#161616</color>
-    <color name="foreground_alt_light">#6A747B</color>
-    <color name="foreground_weak_light">#CBCFD2</color>
-    <color name="foreground_label_light">#FFFFFF</color>
-
-    <!-- foreground neutral colors - Dark-->
-    <color name="foreground_default_disabled_dark">#F0F1F2</color>
-    <color name="foreground_default_dark">#F0F1F2</color>
-    <color name="foreground_alt_dark">#AAB1B6</color>
-    <color name="foreground_weak_dark">#6A747B</color>
-    <color name="foreground_label_dark">#F0F1F2</color>
-
-    <!-- foreground brand colors - Light-->
-    <color name="foreground_content_brand_light">#007FE8</color>
-    <color name="foreground_content_pro_light">#AE61FA</color>
-
-    <!-- foreground brand colors - Dark-->
-    <color name="foreground_content_brand_dark">#0086F5</color>
-    <color name="foreground_content_pro_dark">#AE61FA</color>
-
-    <!-- foreground functional colors - Light-->
-    <color name="foreground_content_danger_light">#F24D4D</color>
-    <color name="foreground_content_warning_light">#FF8B17</color>
-    <color name="foreground_content_info_light">#345CCE</color>
-    <color name="foreground_content_success_light">#39A049</color>
-
-    <!-- foreground functional colors - Dark-->
-    <color name="foreground_content_danger_dark">#FA4848</color>
-    <color name="foreground_content_warning_dark">#FE942A</color>
-    <color name="foreground_content_info_dark">#2E74FF</color>
-    <color name="foreground_content_success_dark">#38A849</color>
-
-    <!-- outlines outline colors - Light-->
-    <color name="foreground_outline_default_light">#1A000000</color>
-    <color name="foreground_outline_alt_light">#A8000000</color>
-</resources>

package/web/styles/flashmaster/sample_fmdx_ios.json

@@ -1,265 +0,0 @@
-{
-    "contentAttention": {
-        "light": "#FFCC00"
-    },
-    "contentBrand": {
-        "dark": "#0086F5",
-        "light": "#007FE8"
-    },
-    "contentDanger": {
-        "dark": "#FA4848",
-        "light": "#F24D4D"
-    },
-    "contentDefault": {
-        "dark": "#F0F1F2",
-        "light": "#161616"
-    },
-    "contentDefaultAlt": {
-        "dark": "#AAB1B6",
-        "light": "#6A747B"
-    },
-    "contentInfo": {
-        "dark": "#2E74FF",
-        "light": "#345CCE"
-    },
-    "contentLabel": {
-        "dark": "#F0F1F2",
-        "light": "#FFFFFF"
-    },
-    "contentPro": {
-        "light": "#AE61FA"
-    },
-    "contentProPlus": {
-        "light": "#724899"
-    },
-    "contentSuccess": {
-        "dark": "#38A849",
-        "light": "#39A049"
-    },
-    "contentWarning": {
-        "dark": "#FE942A",
-        "light": "#FF8B17"
-    },
-    "contentWeak": {
-        "dark": "#6A747B",
-        "light": "#CBCFD2"
-    },
-    "featureAmbulance": {
-        "light": "#FFEB12"
-    },
-    "featureAvgSpeedCheck": {
-        "dark": "#2E74FF",
-        "light": "#386BFF"
-    },
-    "featureEmergency": {
-        "light": "#FAFF12"
-    },
-    "featureFiretruck": {
-        "light": "#C92A2A"
-    },
-    "featureParking": {
-        "light": "#066CBF"
-    },
-    "featurePolice": {
-        "light": "#0C469E"
-    },
-    "featureSignal": {
-        "light": "#9FFF53"
-    },
-    "featureSpeedCam": {
-        "light": "#1EB3FF"
-    },
-    "gradientGerritEnd": {
-        "light": "#7DB527"
-    },
-    "gradientGerritStart": {
-        "light": "#C2D84D"
-    },
-    "gradientProEnd": {
-        "light": "#4F19E9"
-    },
-    "gradientProStart": {
-        "light": "#AE40F2"
-    },
-    "gray_100": {
-        "light": "#F0F1F2"
-    },
-    "gray_200": {
-        "light": "#E1E3E5"
-    },
-    "gray_300": {
-        "light": "#CBCFD2"
-    },
-    "gray_400": {
-        "light": "#AAB1B6"
-    },
-    "gray_500": {
-        "light": "#6A747B"
-    },
-    "gray_600": {
-        "light": "#40464A"
-    },
-    "gray_700": {
-        "light": "#2B2F32"
-    },
-    "gray_800": {
-        "light": "#1D1F20"
-    },
-    "gray_900": {
-        "light": "#161616"
-    },
-    "outlineAlt": {
-        "dark": "#AAB1B6",
-        "light": "#6A747B"
-    },
-    "outlineAvgSpeedCheck": {
-        "light": "#364FC7"
-    },
-    "outlineBrand": {
-        "dark": "#0086F5",
-        "light": "#007FE8"
-    },
-    "outlineDanger": {
-        "dark": "#FA4848",
-        "light": "#F24D4D"
-    },
-    "outlineDangerAlt": {
-        "light": "#C92A2A"
-    },
-    "outlineDefault": {
-        "dark": "#F0F1F2",
-        "light": "#161616"
-    },
-    "outlineInfo": {
-        "dark": "#2E74FF",
-        "light": "#345CCE"
-    },
-    "outlineInverted": {
-        "dark": "#F0F1F2",
-        "light": "#FFFFFF"
-    },
-    "outlineStronger": {
-        "dark": "#6A747B",
-        "light": "#CBCFD2"
-    },
-    "outlineStrongest": {
-        "dark": "#F0F1F2",
-        "light": "#FFFFFF"
-    },
-    "outlineSuccess": {
-        "dark": "#38A849",
-        "light": "#39A049"
-    },
-    "outlineWarning": {
-        "dark": "#FE942A",
-        "light": "#FF8B17"
-    },
-    "outlineWarningAlt": {
-        "light": "#E8590C"
-    },
-    "shadowDefault": {
-        "dark": "#000000",
-        "light": "#00000026"
-    },
-    "specialRoadDefault": {
-        "dark": "#6A747B",
-        "light": "#40464A"
-    },
-    "surfaceAttention": {
-        "light": "#FFCC00"
-    },
-    "surfaceBrand": {
-        "dark": "#0086F5",
-        "light": "#007FE8"
-    },
-    "surfaceBrandAlt": {
-        "dark": "#273744",
-        "light": "#D0EBFF"
-    },
-    "surfaceDanger": {
-        "dark": "#FA4848",
-        "light": "#F24D4D"
-    },
-    "surfaceDangerAlt": {
-        "dark": "#492728",
-        "light": "#FFE3E3"
-    },
-    "surfaceDefault": {
-        "dark": "#161616",
-        "light": "#E1E3E5"
-    },
-    "surfaceDefaultHigher": {
-        "dark": "#1D1F20",
-        "light": "#F0F1F2"
-    },
-    "surfaceDefaultHighest": {
-        "dark": "#2B2F32",
-        "light": "#FFFFFF"
-    },
-    "surfaceDefaultLower": {
-        "dark": "#1D1F20",
-        "light": "#40464A"
-    },
-    "surfaceDefaultLowest": {
-        "dark": "#000000",
-        "light": "#161616"
-    },
-    "surfaceInfo": {
-        "dark": "#2E74FF",
-        "light": "#386BFF"
-    },
-    "surfaceInfoAlt": {
-        "dark": "#364FC7",
-        "light": "#DBE4FF"
-    },
-    "surfacePro": {
-        "light": "#AE61FA"
-    },
-    "surfaceProAlt": {
-        "dark": "#862E9C",
-        "light": "#F3D9FA"
-    },
-    "surfaceProPlus": {
-        "light": "#724899"
-    },
-    "surfaceScrim": {
-        "light": "#000000A8"
-    },
-    "surfaceScrimDarker": {
-        "dark": "#000000A8",
-        "light": "#000000D9"
-    },
-    "surfaceScrimDefaultOpac30": {
-        "dark": "#0000004C",
-        "light": "#FFFFFF4C"
-    },
-    "surfaceScrimDefaultOpac75": {
-        "dark": "#000000BF",
-        "light": "#FFFFFFBF"
-    },
-    "surfaceScrimLighter": {
-        "light": "#0000001A"
-    },
-    "surfaceSuccess": {
-        "dark": "#38A849",
-        "light": "#39A049"
-    },
-    "surfaceSuccessAlt": {
-        "dark": "#2B8A3E",
-        "light": "#D3F9D8"
-    },
-    "surfaceWarning": {
-        "dark": "#FD7E14",
-        "light": "#FF8B17"
-    },
-    "surfaceWarningAlt": {
-        "dark": "#D9480F",
-        "light": "#FFBE17"
-    },
-    "systemBlack": {
-        "light": "#000"
-    },
-    "systemWhite": {
-        "light": "#FFF"
-    }
-}

package/web/styles/flashmaster.scss

@@ -1,21 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-
-
-html,
-body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-
-    font-family: $font-family-base;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-}
-
-select {
-    background-color: #fff;
-}

package/web/styles/main.pcss

@@ -1,143 +0,0 @@
-@import "tailwindcss";
-@import "./flashmaster.scss";
-@import "../../tokens/schema_exports/fm-design-system/fm-design-system.css";
-@source inline("{bg-,text-}{surface-utility-scrim,surface-utility-default-higher-opac0,surface-brand-brand-alt,surface-neutral-default-highest,surface-functional-info,surface-functional-danger,surface-functional-success-alt,surface-functional-info-alt,surface-functional-warning-alt,surface-neutral-default-higher,surface-functional-warning,surface-functional-success,surface-brand-pro,surface-brand-brand,surface-brand-pro-alt,surface-neutral-default,surface-functional-danger-alt,surface-brand-pro-plus,surface-neutral-default-lowest,surface-neutral-default-lower,surface-utility-default-opac75,surface-utility-scrim-darker,surface-utility-scrim-lighter,surface-functional-attention,surface-utility-default-opac30,content-brand-brand,content-functional-danger,content-brand-pro-plus,content-neutral-default,content-functional-success,content-functional-attention,content-neutral-label,content-functional-info,content-neutral-weak,content-neutral-default-alt,content-brand-pro,content-functional-warning,outline-functional-warning-alt,outline-functional-avg-speed-check,outline-neutral-inverted,outline-functional-danger,outline-functional-warning,outline-neutral-stronger,outline-neutral-default-alt,outline-functional-success,outline-functional-informative,outline-functional-danger-alt,outline-neutral-default,outline-brand-brand,outline-neutral-strongest}");
-
-
-
-
-@layer utilities {
-    .type-display-lg {
-        font-weight: 900;
-        font-size: 6.5rem;
-        line-height: 1.05;
-    }
-    .type-display, .type-display-md {
-        font-weight: 800;
-        font-size: 5rem;
-        line-height: 1.2;
-    }
-    .type-display-sm {
-        font-weight: 700;
-        font-size: 4.5rem;
-        line-height: normal;
-    }
-    .type-headline-lg {
-        font-weight: 900;
-        font-size: 2.5rem;
-        line-height: 1.2;
-    }
-    .type-headline, .type-headline-md {
-        font-weight: 800;
-        font-size: 2rem;
-        line-height: 1.3;
-    }
-    .type-title-lg {
-        font-size: 1.5rem; /* text-2xl */
-        font-weight: 600;
-        line-height: 1.3;
-    }
-    .type-title, .type-title-md {
-        font-size: 1.25rem; /* text-xl */
-        font-weight: 600;
-        line-height: 1.3;
-    }
-    .type-body-lg {
-        line-height: 1.5; /* leading-6 */
-        font-weight: 500;
-    }
-    .type-body, .type-body-md {
-        line-height: 1.5; /* leading-6 */
-        font-weight: 500;
-    }
-    .type-body-sm {
-        font-size: 0.875rem; /* text-sm */
-        line-height: 1.5; /* leading-6 */
-        font-weight: 400;
-    }
-    body .type-special {
-        font-weight: 800;
-        font-style: italic;
-    }
-    body .type-prominent {
-        font-weight: 700;
-    }
-}
-
-@theme {
-    /* legacy fallback: the old version skipped the type namespace, eg "neutral" */
-    --color-surface-defaulthighest: var(--token-color-surface-neutral-default-highest);
-    --color-surface-defaulthigher: var(--token-color-surface-neutral-default-higher);
-    --color-surface-default: var(--token-color-surface-neutral-default);
-    --color-surface-defaultlower: var(--token-color-surface-neutral-default-lower);
-    --color-surface-defaultlowest: var(--token-color-surface-neutral-default-lowest);
-    --color-surface-brand: var(--token-color-surface-brand-brand);
-    --color-surface-brandalt: var(--token-color-surface-brand-brand-alt);
-    --color-surface-brandalt: var(--token-color-surface-brand-brand-alt);
-    --color-surface-pro: var(--token-color-surface-brand-pro);
-    --color-surface-proalt: var(--token-color-surface-brand-pro-alt);
-    --color-surface-pro-plus: var(--token-color-surface-brand-pro-plus);
-    --color-surface-danger: var(--token-color-surface-functional-danger);
-    --color-surface-dangeralt: var(--token-color-surface-functional-danger-alt);
-    --color-surface-dangeralt: var(--token-color-surface-functional-danger-alt);
-    --color-surface-warning: var(--token-color-surface-functional-warning);
-    --color-surface-warningalt: var(--token-color-surface-functional-warning-alt);
-    --color-surface-attention: var(--token-color-surface-functional-attention);
-    --color-surface-info: var(--token-color-surface-functional-info);
-    --color-surface-infoalt: var(--token-color-surface-functional-info-alt);
-    --color-surface-success: var(--token-color-surface-functional-success);
-    --color-surface-succesalt: var(--token-color-surface-functional-succes-alt);
-    --color-content-default: var(--token-color-content-neutral-default);
-    --color-content-defaultalt: var(--token-color-content-neutral-default-alt);
-    --color-content-weak: var(--token-color-content-neutral-weak);
-    --color-content-label: var(--token-color-content-neutral-label);
-    --color-content-brand: var(--token-color-content-brand-brand);
-    --color-content-pro: var(--token-color-content-brand-pro);
-    --color-content-proplus: var(--token-color-content-brand-pro-plus);
-    --color-content-warning: var(--token-color-content-functional-warning);
-    --color-content-info: var(--token-color-content-functional-info);
-    --color-content-success: var(--token-color-content-functional-success);
-    --color-content-danger: var(--token-color-content-functional-danger);
-    --color-content-attention: var(--token-color-content-functional-attention);
-    --color-outline-default: var(--token-color-outline-neutral-default);
-    --color-outline-defaultalt: var(--token-color-outline-neutral-default-alt);
-    --color-outline-defaultalt: var(--token-color-outline-neutral-default-alt);
-    --color-outline-stronger: var(--token-color-outline-neutral-stronger);
-    --color-outline-strongest: var(--token-color-outline-neutral-strongest);
-    --color-outline-inverted: var(--token-color-outline-neutral-inverted);
-    --color-outline-brand: var(--token-color-outline-brand-brand);
-    --color-outline-danger: var(--token-color-outline-functional-danger);
-    --color-outline-dangeralt: var(--token-color-outline-functional-danger-alt);
-    --color-outline-warning: var(--token-color-outline-functional-warning);
-    --color-outline-warningalt: var(--token-color-outline-functional-warning-alt);
-    --color-outline-success: var(--token-color-outline-functional-success);
-    --color-outline-informative: var(--token-color-outline-functional-informative);
-    --color-outline-avg-speed-check: var(--token-color-outline-functional-avg-speed-check);
-    --color-special-speedcam: var(--token-color-special-feature-speedcam);
-    --color-special-avg-speed-check: var(--token-color-special-feature-avg-speed-check);
-    --color-special-parking: var(--token-color-special-feature-parking);
-    --color-special-parking-alt: var(--token-color-special-feature-parking-alt);
-    --color-special-police: var(--token-color-special-feature-police);
-    --color-special-firetruck: var(--token-color-special-feature-firetruck);
-    --color-special-ambulance: var(--token-color-special-feature-ambulance);
-    --color-special-emergency: var(--token-color-special-feature-emergency);
-    --color-special-signal: var(--token-color-special-feature-signal);
-
-    /* Spacing tokens: ideally, these should also come from export-tokens.js output */
-    --spacing-xxxl: calc(var(--token-shape-padding-padding-xxxl, 64) * 1px);
-	--spacing-xxl: calc(var(--token-shape-padding-padding-xxl, 48) * 1px);
-	--spacing-xl: calc(var(--token-shape-padding-padding-xl, 32) * 1px);
-	--spacing-lg: calc(var(--token-shape-padding-padding-lg, 24) * 1px);
-	--spacing-md: calc(var(--token-shape-padding-padding-md, 16) * 1px);
-	--spacing-sm: calc(var(--token-shape-padding-padding-sm, 12) * 1px);
-	--spacing-xs: calc(var(--token-shape-padding-padding-xs, 8) * 1px);
-	--spacing-xxs: calc(var(--token-shape-padding-padding-xxs, 4) * 1px);
-	--spacing-xxxs: calc(var(--token-shape-padding-padding-xxxs, 2) * 1px);
-	--spacing-nudge: calc(var(--token-shape-padding-padding-nudge, 1) * 1px);
-	--spacing-none: calc(var(--token-shape-padding-padding-none, 0) * 1px);
-}
-
-.container {
-    margin-left: auto;
-    margin-right: auto;
-}