search

material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
360 stars 27 forks source link

Surface container colors and fixed colors not exported in Android xml files #187

Closed VitaliyBelyaev closed 6 months ago

VitaliyBelyaev commented 11 months ago

Describe the bug When creating new theme with Figma Material Theme Builder Plugin, after exporting it as xml for Android there are no surface container colors and fixed colors in xml files.

To Reproduce Steps to reproduce the behavior:

  1. In Settings enable Generate Surface Styles checkbox
  2. Select add new theme with name test
  3. Wait while plugin finish generation colors in Figma
  4. Click Export as xml for Android

Expected behavior Surface colors(surfaceContainerHighest,surfaceContainerHigh, etc) and fixed colors(for primary, secondary, teriary) are exists in colors.xml and in light/dark themes.xml

colors.xml

<resources>
    <color name="seed">#6750A4</color>
    <color name="md_theme_light_primary">#6750A4</color>
    <color name="md_theme_light_onPrimary">#FFFFFF</color>
    <color name="md_theme_light_primaryContainer">#EADDFF</color>
    <color name="md_theme_light_onPrimaryContainer">#21005D</color>
    <color name="md_theme_light_secondary">#625B71</color>
    <color name="md_theme_light_onSecondary">#FFFFFF</color>
    <color name="md_theme_light_secondaryContainer">#E8DEF8</color>
    <color name="md_theme_light_onSecondaryContainer">#1D192B</color>
    <color name="md_theme_light_tertiary">#7D5260</color>
    <color name="md_theme_light_onTertiary">#FFFFFF</color>
    <color name="md_theme_light_tertiaryContainer">#FFD8E4</color>
    <color name="md_theme_light_onTertiaryContainer">#31111D</color>
    <color name="md_theme_light_error">#B3261E</color>
    <color name="md_theme_light_onError">#FFFFFF</color>
    <color name="md_theme_light_errorContainer">#F9DEDC</color>
    <color name="md_theme_light_onErrorContainer">#410E0B</color>
    <color name="md_theme_light_outline">#79747E</color>
    <color name="md_theme_light_background">#FEF7FF</color>
    <color name="md_theme_light_onBackground">#1D1B20</color>
    <color name="md_theme_light_surface">#FEF7FF</color>
    <color name="md_theme_light_onSurface">#1D1B20</color>
    <color name="md_theme_light_surfaceVariant">#E7E0EC</color>
    <color name="md_theme_light_onSurfaceVariant">#49454F</color>
    <color name="md_theme_light_inverseSurface">#322F35</color>
    <color name="md_theme_light_inverseOnSurface">#F5EFF7</color>
    <color name="md_theme_light_inversePrimary">#D0BCFF</color>
    <color name="md_theme_light_shadow">#000000</color>
    <color name="md_theme_light_surfaceTint">#6750A4</color>
    <color name="md_theme_light_outlineVariant">#CAC4D0</color>
    <color name="md_theme_light_scrim">#000000</color>
    <color name="md_theme_dark_primary">#D0BCFF</color>
    <color name="md_theme_dark_onPrimary">#381E72</color>
    <color name="md_theme_dark_primaryContainer">#4F378B</color>
    <color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
    <color name="md_theme_dark_secondary">#CCC2DC</color>
    <color name="md_theme_dark_onSecondary">#332D41</color>
    <color name="md_theme_dark_secondaryContainer">#4A4458</color>
    <color name="md_theme_dark_onSecondaryContainer">#E8DEF8</color>
    <color name="md_theme_dark_tertiary">#EFB8C8</color>
    <color name="md_theme_dark_onTertiary">#492532</color>
    <color name="md_theme_dark_tertiaryContainer">#633B48</color>
    <color name="md_theme_dark_onTertiaryContainer">#FFD8E4</color>
    <color name="md_theme_dark_error">#F2B8B5</color>
    <color name="md_theme_dark_onError">#601410</color>
    <color name="md_theme_dark_errorContainer">#8C1D18</color>
    <color name="md_theme_dark_onErrorContainer">#F9DEDC</color>
    <color name="md_theme_dark_outline">#938F99</color>
    <color name="md_theme_dark_background">#141218</color>
    <color name="md_theme_dark_onBackground">#E6E0E9</color>
    <color name="md_theme_dark_surface">#141218</color>
    <color name="md_theme_dark_onSurface">#E6E0E9</color>
    <color name="md_theme_dark_surfaceVariant">#49454F</color>
    <color name="md_theme_dark_onSurfaceVariant">#CAC4D0</color>
    <color name="md_theme_dark_inverseSurface">#E6E0E9</color>
    <color name="md_theme_dark_inverseOnSurface">#322F35</color>
    <color name="md_theme_dark_inversePrimary">#6750A4</color>
    <color name="md_theme_dark_shadow">#000000</color>
    <color name="md_theme_dark_surfaceTint">#D0BCFF</color>
    <color name="md_theme_dark_outlineVariant">#49454F</color>
    <color name="md_theme_dark_scrim">#000000</color>
</resources>

themes.xml


<resources>
    <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
        <item name="colorPrimary">@color/md_theme_light_primary</item>
        <item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
        <item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
        <item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
        <item name="colorSecondary">@color/md_theme_light_secondary</item>
        <item name="colorOnSecondary">@color/md_theme_light_onSecondary</item>
        <item name="colorSecondaryContainer">@color/md_theme_light_secondaryContainer</item>
        <item name="colorOnSecondaryContainer">@color/md_theme_light_onSecondaryContainer</item>
        <item name="colorTertiary">@color/md_theme_light_tertiary</item>
        <item name="colorOnTertiary">@color/md_theme_light_onTertiary</item>
        <item name="colorTertiaryContainer">@color/md_theme_light_tertiaryContainer</item>
        <item name="colorOnTertiaryContainer">@color/md_theme_light_onTertiaryContainer</item>
        <item name="colorError">@color/md_theme_light_error</item>
        <item name="colorOnError">@color/md_theme_light_onError</item>
        <item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
        <item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
        <item name="colorOutline">@color/md_theme_light_outline</item>
        <item name="android:colorBackground">@color/md_theme_light_background</item>
        <item name="colorOnBackground">@color/md_theme_light_onBackground</item>
        <item name="colorSurface">@color/md_theme_light_surface</item>
        <item name="colorOnSurface">@color/md_theme_light_onSurface</item>
        <item name="colorSurfaceVariant">@color/md_theme_light_surfaceVariant</item>
        <item name="colorOnSurfaceVariant">@color/md_theme_light_onSurfaceVariant</item>
        <item name="colorSurfaceInverse">@color/md_theme_light_inverseSurface</item>
        <item name="colorOnSurfaceInverse">@color/md_theme_light_inverseOnSurface</item>
        <item name="colorPrimaryInverse">@color/md_theme_light_inversePrimary</item>
    </style>
</resources>

Desktop (please complete the following information):

Additional context Surface container colors and fixed colors exist in Figma colors. Also if import as .json theme file surface container colors and fixed colors are exists there. Maybe there are some problem in export colors logic for Android xml.

theme.json

{
  "seed": "#6750A4",
  "name": "material-theme",
  "description": "TYPE: BASELINE",
  "baseline": true,
  "extendedColors": [],
  "coreColors": {
    "primary": "#6750A4"
  },
  "schemes": {
    "light": {
      "primary": "#6750A4",
      "onPrimary": "#FFFFFF",
      "primaryContainer": "#EADDFF",
      "onPrimaryContainer": "#21005D",
      "primaryFixed": "#EADDFF",
      "onPrimaryFixed": "#21005D",
      "primaryFixedDim": "#D0BCFF",
      "onPrimaryFixedVariant": "#4F378B",
      "secondary": "#625B71",
      "onSecondary": "#FFFFFF",
      "secondaryContainer": "#E8DEF8",
      "onSecondaryContainer": "#1D192B",
      "secondaryFixed": "#E8DEF8",
      "onSecondaryFixed": "#1D192B",
      "secondaryFixedDim": "#CCC2DC",
      "onSecondaryFixedVariant": "#4A4458",
      "tertiary": "#7D5260",
      "onTertiary": "#FFFFFF",
      "tertiaryContainer": "#FFD8E4",
      "onTertiaryContainer": "#31111D",
      "tertiaryFixed": "#FFD8E4",
      "onTertiaryFixed": "#31111D",
      "tertiaryFixedDim": "#EFB8C8",
      "onTertiaryFixedVariant": "#633B48",
      "error": "#B3261E",
      "onError": "#FFFFFF",
      "errorContainer": "#F9DEDC",
      "onErrorContainer": "#410E0B",
      "outline": "#79747E",
      "background": "#FEF7FF",
      "onBackground": "#1D1B20",
      "surface": "#FEF7FF",
      "onSurface": "#1D1B20",
      "surfaceVariant": "#E7E0EC",
      "onSurfaceVariant": "#49454F",
      "inverseSurface": "#322F35",
      "inverseOnSurface": "#F5EFF7",
      "inversePrimary": "#D0BCFF",
      "shadow": "#000000",
      "surfaceTint": "#6750A4",
      "outlineVariant": "#CAC4D0",
      "scrim": "#000000",
      "surfaceContainerHighest": "#E6E0E9",
      "surfaceContainerHigh": "#ECE6F0",
      "surfaceContainer": "#F3EDF7",
      "surfaceContainerLow": "#F7F2FA",
      "surfaceContainerLowest": "#FFFFFF",
      "surfaceBright": "#FEF7FF",
      "surfaceDim": "#DED8E1"
    },
    "dark": {
      "primary": "#D0BCFF",
      "onPrimary": "#381E72",
      "primaryContainer": "#4F378B",
      "onPrimaryContainer": "#EADDFF",
      "primaryFixed": "#EADDFF",
      "onPrimaryFixed": "#21005D",
      "primaryFixedDim": "#D0BCFF",
      "onPrimaryFixedVariant": "#4F378B",
      "secondary": "#CCC2DC",
      "onSecondary": "#332D41",
      "secondaryContainer": "#4A4458",
      "onSecondaryContainer": "#E8DEF8",
      "secondaryFixed": "#E8DEF8",
      "onSecondaryFixed": "#1D192B",
      "secondaryFixedDim": "#CCC2DC",
      "onSecondaryFixedVariant": "#4A4458",
      "tertiary": "#EFB8C8",
      "onTertiary": "#492532",
      "tertiaryContainer": "#633B48",
      "onTertiaryContainer": "#FFD8E4",
      "tertiaryFixed": "#FFD8E4",
      "onTertiaryFixed": "#31111D",
      "tertiaryFixedDim": "#EFB8C8",
      "onTertiaryFixedVariant": "#633B48",
      "error": "#F2B8B5",
      "onError": "#601410",
      "errorContainer": "#8C1D18",
      "onErrorContainer": "#F9DEDC",
      "outline": "#938F99",
      "background": "#141218",
      "onBackground": "#E6E0E9",
      "surface": "#141218",
      "onSurface": "#E6E0E9",
      "surfaceVariant": "#49454F",
      "onSurfaceVariant": "#CAC4D0",
      "inverseSurface": "#E6E0E9",
      "inverseOnSurface": "#322F35",
      "inversePrimary": "#6750A4",
      "shadow": "#000000",
      "surfaceTint": "#D0BCFF",
      "outlineVariant": "#49454F",
      "scrim": "#000000",
      "surfaceContainerHighest": "#36343B",
      "surfaceContainerHigh": "#2B2930",
      "surfaceContainer": "#211F26",
      "surfaceContainerLow": "#1D1B20",
      "surfaceContainerLowest": "#0F0D13",
      "surfaceBright": "#3B383E",
      "surfaceDim": "#141218"
    }
  },
  "palettes": {
    "primary": {
      "0": "#000000",
      "10": "#21005D",
      "20": "#381E72",
      "30": "#4F378B",
      "40": "#6750A4",
      "50": "#7F67BE",
      "60": "#9A82DB",
      "70": "#B69DF8",
      "80": "#D0BCFF",
      "90": "#EADDFF",
      "95": "#F6EDFF",
      "99": "#FFFBFE",
      "100": "#FFFFFF"
    },
    "secondary": {
      "0": "#000000",
      "10": "#1D192B",
      "20": "#332D41",
      "30": "#4A4458",
      "40": "#625B71",
      "50": "#7A7289",
      "60": "#958DA5",
      "70": "#B0A7C0",
      "80": "#CCC2DC",
      "90": "#E8DEF8",
      "95": "#F6EDFF",
      "99": "#FFFBFE",
      "100": "#FFFFFF"
    },
    "tertiary": {
      "0": "#000000",
      "10": "#31111D",
      "20": "#492532",
      "30": "#633B48",
      "40": "#7D5260",
      "50": "#986977",
      "60": "#B58392",
      "70": "#D29DAC",
      "80": "#EFB8C8",
      "90": "#FFD8E4",
      "95": "#FFECF1",
      "99": "#FFFBFA",
      "100": "#FFFFFF"
    },
    "error": {
      "0": "#000000",
      "10": "#410E0B",
      "20": "#601410",
      "30": "#8C1D18",
      "40": "#B3261E",
      "50": "#DC362E",
      "60": "#E46962",
      "70": "#EC928E",
      "80": "#F2B8B5",
      "90": "#F9DEDC",
      "95": "#FCEEEE",
      "99": "#FFFBF9",
      "100": "#FFFFFF"
    },
    "neutral": {
      "0": "#000000",
      "4": "#0F0D13",
      "6": "#141218",
      "10": "#1D1B20",
      "12": "#211F26",
      "17": "#2B2930",
      "20": "#322F35",
      "22": "#36343B",
      "24": "#3B383E",
      "30": "#48464C",
      "40": "#605D64",
      "50": "#79767D",
      "60": "#938F96",
      "70": "#AEA9B1",
      "80": "#CAC5CD",
      "87": "#DED8E1",
      "90": "#E6E0E9",
      "92": "#ECE6F0",
      "94": "#F3EDF7",
      "95": "#F5EFF7",
      "96": "#F7F2FA",
      "98": "#FEF7FF",
      "99": "#FFFBFF",
      "100": "#FFFFFF"
    },
    "neutralVariant": {
      "0": "#000000",
      "10": "#1D1A22",
      "20": "#322F37",
      "30": "#49454F",
      "40": "#605D66",
      "50": "#79747E",
      "60": "#938F99",
      "70": "#AEA9B4",
      "80": "#CAC4D0",
      "90": "#E7E0EC",
      "95": "#F5EEFA",
      "99": "#FFFBFE",
      "100": "#FFFFFF"
    }
  },
  "styles": {
    "display": {
      "large": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 57,
        "lineHeight": 64,
        "letterSpacing": -0.25
      },
      "medium": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 45,
        "lineHeight": 52,
        "letterSpacing": 0
      },
      "small": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 36,
        "lineHeight": 44,
        "letterSpacing": 0
      }
    },
    "headline": {
      "large": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 32,
        "lineHeight": 40,
        "letterSpacing": 0
      },
      "medium": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 28,
        "lineHeight": 36,
        "letterSpacing": 0
      },
      "small": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 24,
        "lineHeight": 32,
        "letterSpacing": 0
      }
    },
    "body": {
      "large": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 16,
        "lineHeight": 24,
        "letterSpacing": 0.5
      },
      "medium": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 14,
        "lineHeight": 20,
        "letterSpacing": 0.25
      },
      "small": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 12,
        "lineHeight": 16,
        "letterSpacing": 0.4000000059604645
      }
    },
    "label": {
      "large": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Medium",
        "fontWeight": 500,
        "fontSize": 14,
        "lineHeight": 20,
        "letterSpacing": 0.10000000149011612
      },
      "medium": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Medium",
        "fontWeight": 500,
        "fontSize": 12,
        "lineHeight": 16,
        "letterSpacing": 0.5
      },
      "small": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Medium",
        "fontWeight": 500,
        "fontSize": 11,
        "lineHeight": 16,
        "letterSpacing": 0.5
      }
    },
    "title": {
      "large": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 22,
        "lineHeight": 28,
        "letterSpacing": 0
      },
      "medium": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Medium",
        "fontWeight": 500,
        "fontSize": 16,
        "lineHeight": 24,
        "letterSpacing": 0.15000000596046448
      },
      "small": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Medium",
        "fontWeight": 500,
        "fontSize": 14,
        "lineHeight": 20,
        "letterSpacing": 0.10000000149011612
      }
    }
  },
  "customColors": []
}
VitaliyBelyaev commented 11 months ago

As a workaround, I create python script that generates colors.xml and light/dark themes.xml from .json theme file.

DominicD commented 11 months ago

I think the same happens for jetpack compose export

jwill commented 11 months ago

New surface roles are planned for export. They will be updated in theming code when most platforms implement them.