Custom styles

The styles of the components can be modified by attaching stylesheets. To do so, a styles object must be included inside each source:

new Croupier({
  sources: [
    {
      name: "ets",
      url: "https://api.lemoncaas.etsfactory.com/v3",
      token: "xxxxxxxxxxxxxxxxxxx",
      styles: {
        base: "https://myweb.com/styles.css" (custom stylesheet),
        components: {
          "component-name-1": "https://myweb.com/styles.css" (custom stylesheet),
          "component-name-2": "https://myweb.com/styles.css" (custom stylesheet),
          ...
          "component-name-N": "https://myweb.com/styles.css" (custom stylesheet)
        }
      }
    }
  ]
});

The base stylesheet is applied to all components. You can also attach styles for each component. For that, you have to add the name of the component as a key of the components field, and as value the url of the stylesheet. It means, if you define the base and also one per component both will be in the rendered component.

To change each of the CSS variables (design tokens) you must insert the variable to be replaced into the base CSS that you pass the variable to be replaced into of :host:

:host {
  --color-primary-1: "#bafb07";
}

You can also add a class to the components:

<cr-component name="asset-search" class="search" />

In this case you can give styles to the .search class, but they will only be applied to the :host of the webcomponents (since the rest of the styles are isolated). This can be especially useful to modify certain CSS variables that each webcomponent has.

Fonts

By default the components come with an embedded font. This functionality can be disabled by passing to the fonts object the parameter.

new Croupier({
  sources: [
    {
      name: "ets",
      url: "https://api.lemoncaas.etsfactory.com/v3",
      token: "xxxxxxxxxxxxxxxxxxx",
      disableDefaultFonts: true,
    },
  ],
});

For the components to use the font of the page in which they are inserted you have to modify in the base CSS the variables:

:host {
  --font-family: "Open sans";
  --font-family-titles: "Open sans";
  --font-family-display: "Open sans";
}

Default variables

These are the global variables that exist in lemoncaas, each one with its respective default value. Any of them can be overwritten in the global styles file or in each particular component.

:host {
  --color-grey-1: #ffffff;
  --color-grey-2: #d2d0ce;
  --color-grey-3: #979593;
  --color-grey-4: #605e5c;
  --color-grey-5: #292827;

  --color-blue-1: #e6f7ff;
  --color-blue-2: #bae7ff;
  --color-blue-3: #91d5ff;
  --color-blue-4: #69c0ff;
  --color-blue-5: #40a9ff;
  --color-blue-6: #1890ff;
  --color-blue-7: #096dd9;
  --color-blue-8: #0050b3;
  --color-blue-9: #003a8c;
  --color-blue-10: #002766;

  --color-green-1: #f6ffed;
  --color-green-2: #d9f7be;
  --color-green-3: #b7eb8f;
  --color-green-4: #95de64;
  --color-green-5: #73d13d;
  --color-green-6: #52c41a;
  --color-green-7: #389e0d;
  --color-green-8: #237804;
  --color-green-9: #135200;
  --color-green-10: #092b00;

  --color-red-1: #fff1f0;
  --color-red-2: #ffccc7;
  --color-red-3: #ffa39e;
  --color-red-4: #ff7875;
  --color-red-5: #ff4d4f;
  --color-red-6: #f5222d;
  --color-red-7: #cf1322;
  --color-red-8: #a8071a;
  --color-red-9: #820014;
  --color-red-10: #5c0011;

  --color-yellow-1: #feffe6;
  --color-yellow-2: #ffffb8;
  --color-yellow-3: #fffb8f;
  --color-yellow-4: #fff566;
  --color-yellow-5: #ffec3d;
  --color-yellow-6: #fadb14;
  --color-yellow-7: #d4b106;
  --color-yellow-8: #ad8b00;
  --color-yellow-9: #876800;
  --color-yellow-10: #614700;

  --color-aqua-1: #e5ffff;
  --color-aqua-2: #ccffff;
  --color-aqua-3: #99ffff;
  --color-aqua-4: #66ffff;
  --color-aqua-5: #33ffff;
  --color-aqua-6: #00ffff;
  --color-aqua-7: #00cccc;
  --color-aqua-8: #009999;
  --color-aqua-9: #006666;
  --color-aqua-10: #003333;

  --color-orange-1: #fff2e5;
  --color-orange-2: #ffe5cc;
  --color-orange-3: #f3ae8b;
  --color-orange-4: #ffb266;
  --color-orange-5: #ff9933;
  --color-orange-6: #ff8000;
  --color-orange-7: #cc6600;
  --color-orange-8: #994d00;
  --color-orange-9: #663300;
  --color-orange-10: #331a00;

  --color-purple-1: #f7e5ff;
  --color-purple-2: #eeccff;
  --color-purple-3: #dd99ff;
  --color-purple-4: #cc66ff;
  --color-purple-5: #bb33ff;
  --color-purple-6: #aa00ff;
  --color-purple-7: #8800cc;
  --color-purple-8: #660099;
  --color-purple-9: #440066;
  --color-purple-10: #220033;

  --color-background: #f9faff;
  --color-background-complemantary: #000000;
  --color-text: var(--color-grey-5);
  --color-text-inverse: var(--color-grey-1);

  --color-primary-h: 194;
  --color-primary-s: 45%;
  --color-primary-l: 53%;

  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));

  --color-primary-5: hsl(var(--color-primary-h), var(--color-primary-s), 60%);
  --color-primary-4: hsl(var(--color-primary-h), var(--color-primary-s), 70%);
  --color-primary-3: hsl(var(--color-primary-h), var(--color-primary-s), 80%);
  --color-primary-2: hsl(var(--color-primary-h), var(--color-primary-s), 90%);
  --color-primary-1: hsl(var(--color-primary-h), var(--color-primary-s), 95%);

  --color-secondary-h: 245;
  --color-secondary-s: 81%;
  --color-secondary-l: 15%;

  --color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));

  --color-secondary-5: hsl(var(--color-secondary-h), var(--color-secondary-s), 60%);
  --color-secondary-4: hsl(var(--color-secondary-h), var(--color-secondary-s), 70%);
  --color-secondary-3: hsl(var(--color-secondary-h), var(--color-secondary-s), 80%);
  --color-secondary-2: hsl(var(--color-secondary-h), var(--color-secondary-s), 90%);
  --color-secondary-1: hsl(var(--color-secondary-h), var(--color-secondary-s), 95%);

  --font-size-base: 16;
  --font-family-display: "FontDisplay";
  --font-family-titles: "FontTitles";
  --font-family: "FontBase";

  --space-base: 16px;

  --space-0: calc(var(--space-base) * 0.125);
  --space-1: calc(var(--space-base) * 0.25);
  --space-2: calc(var(--space-base) * 0.5);
  --space-3: calc(var(--space-base) * 0.75);
  --space-4: calc(var(--space-base) * 1);
  --space-5: calc(var(--space-base) * 1.5);
  --space-6: calc(var(--space-base) * 2);
  --space-7: calc(var(--space-base) * 2.5);
  --space-8: calc(var(--space-base) * 3);
  --space-9: calc(var(--space-base) * 3.5);
  --space-10: calc(var(--space-base) * 4);
  --space-11: calc(var(--space-base) * 4.5);
  --space-12: calc(var(--space-base) * 5);
  --space-13: calc(var(--space-base) * 5.5);
  --space-14: calc(var(--space-base) * 6);

  --border-radius: 10px;
}