@reuters-graphics/graphics-components 1.0.30 → 1.1.0

package/dist/docs/styles/tokens/interactivity/_main.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../../utils/docsPage.js';
+import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
+import { cssStringToTableArray } from '../../../utils/parseCss';
+
+import cursor from '../../../../scss/tokens/interactivity/_cursor.scss?raw';
+import pointerEvents from '../../../../scss/tokens/interactivity/_pointer-events.scss?raw';
+
+<Meta title="Styles/Tokens/Interactivity" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Interactivity tokens
+
+<CopyTable
+  title="Cursor"
+  mdnLink="cursor"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(cursor)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Pointer events"
+  mdnLink="pointer-events"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(pointerEvents)}
+  copyable={[true, false]}
+/>

package/dist/docs/styles/tokens/intro.mdx

@@ -0,0 +1,128 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../utils/docsPage.js';
+import Mermaid from '../../docs-components/Mermaid/Mermaid.jsx';
+import CopyTable from '../../docs-components/CopyTable/Table.jsx';
+import { cssStringToTableArray } from '../../utils/parseCss';
+import './styles.scss';
+
+import color from '../../../scss/tokens/text/_color.scss?inline';
+
+<Meta title="Styles/Tokens/Intro" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Style tokens
+
+All of the components in this library have been styled using a system of tokens. The style tokens give us a lot of flexibility and ultimately make for the most concise CSS possible.
+
+You can use the style tokens to help shortcut the time you spend writing CSS and reinventing solid design conventions.
+
+## What's a "token"?
+
+A token represents the value for an individual style rule, like `font-size` or `color`. Each token sets just one style rule, and multiple tokens are combined together to style an element, like a `<div/>`.
+
+<Mermaid
+  name="token-graph"
+  code={`
+graph LR;
+  A(Token)-->|1rem|B;
+  B(Style rule)-->|font-size|Y;
+  C(Token)-->|bold|D;
+  D(Style rule)-->|font-weight|Y;
+  E(Token)-->|serif|F;
+  F(Style rule)-->|font-family|Y;
+  Y(HTML Element)-->|"&lt;div/&gt;"|Z("&lt;Component/&gt;");
+`}
+/>
+
+Each set of tokens has several levels that represent the different values a style rule can take in our design system and are grouped in how they're named to make them easier to remember.
+
+<Mermaid
+  name="individual-graph"
+  code={`
+graph LR;
+  TD("\`**Text align tokens**\`")---TA;
+  TD---TB;
+  TD---TC;
+  TA(text-left)-->TX("text-align: left;");
+  TB(text-center)-->TY("text-align: center;");
+  TC(text-right)-->TZ("text-align: right;");
+`}
+/>
+
+## Using style tokens
+
+> Whether you use style tokens or write your own custom CSS in your project is **entirely up to you**.
+>
+> There are hundreds of tokens, so they can be a little daunting at first. But learning the tokens for the styles you have to write most often **will absolutely save you time**, so we recommend giving them a try.
+>
+> **That said**, we _do recommend_ using tokens for styling typography, especially `font-size`. (Our typography size tokens use a fluid scale so your text will look great whether a reader is on a mobile phone or giant desktop.)
+
+All of our style tokens can be used through either a class name, an SCSS mixin or both. Use the tables throughout this section of the docs to see what's available for each token.
+
+### For example...
+
+Here's our table of text colour tokens, which set the `text-color` style.
+
+<CopyTable
+  title="Colour"
+  mdnLink="color"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(color, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
+
+This table's tokens can be used through either a class or an SCSS mixin. (The table lets you click-to-copy for either.)
+
+To use the token that sets the `color` style to our "primary" text colour (i.e., black), you'd use the `Class` token like this:
+
+```svelte
+<p class="text-primary">Lorem ipsum...</p>
+```
+
+If you'd like to set the style in SCSS, you'd use the `Include` token like this:
+
+```svelte
+<p>Lorem ipsum...</p>
+
+<style lang="scss">
+  @import '@reuters-graphics/graphics-components/scss/mixins';
+
+  p {
+    @include text-primary;
+  }
+</style>
+```
+
+> **Note:** If you're writing SCSS _inside a component_, the `@import` above is required. If you're writing in `global.scss`, this is already included for you.
+
+To use multiple tokens, you'd simply add another class or include:
+
+```svelte
+<p class="text-primary font-bold">Lorem ipsum...</p>
+```
+
+```scss
+p {
+  @include text-primary;
+  @include font-bold;
+}
+```
+
+It's normal that not every style is accounted for by our tokens, so even if you use them expect you'll still have to write your own SCSS at times. But using the pre-made tokens will shortcut a lot of time spent tweaking styles to make designs consistent across your page. The styles set by our tokens have been pre-harmonised for you!
+
+### `!important` modifier
+
+Most of our tokens can be used with an `!important` modifier simply by adding an `!`. So for the class token that controls `font-weight`, you'd make it important like:
+
+```svelte
+<p class="!font-bold">Lorem ipsum...</p>
+```
+
+For SCSS includes, the concept is the same, but you need to escape the `!` by adding an extra `\` to make it valid syntax:
+
+```scss
+p {
+  @include \!font-bold;
+}
+```

package/dist/docs/styles/tokens/layout/main.mdx

@@ -0,0 +1,73 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../../utils/docsPage.js';
+import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
+import { cssStringToTableArray } from '../../../utils/parseCss';
+import boxSizing from '../../../../scss/tokens/layout/_box-sizing.scss?raw';
+import display from '../../../../scss/tokens/layout/_display.scss?raw';
+import floats from '../../../../scss/tokens/layout/_floats.scss?raw';
+import objectFit from '../../../../scss/tokens/layout/_object-fit.scss?raw';
+import objectPosition from '../../../../scss/tokens/layout/_object-position.scss?raw';
+import overflow from '../../../../scss/tokens/layout/_overflow.scss?raw';
+import position from '../../../../scss/tokens/layout/_position.scss?raw';
+
+<Meta title="Styles/Tokens/Layout" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Layout tokens
+
+<CopyTable
+  title="Display"
+  mdnLink="display"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(display)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Position"
+  mdnLink="position"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(position)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Overflow"
+  mdnLink="overflow"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(overflow)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Float"
+  mdnLink="float"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(floats)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Box sizing"
+  mdnLink="box-sizing"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(boxSizing)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Object fit"
+  mdnLink="object-fit"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(objectFit)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Object position"
+  mdnLink="object-position"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(objectPosition)}
+  copyable={[true, false]}
+/>

package/dist/docs/styles/tokens/sizing/main.mdx

@@ -0,0 +1,64 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../../utils/docsPage.js';
+import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
+import { cssStringToTableArray } from '../../../utils/parseCss';
+import height from '../../../../scss/tokens/sizing/_height.scss?inline';
+import maxHeight from '../../../../scss/tokens/sizing/_max-height.scss?inline';
+import maxWidth from '../../../../scss/tokens/sizing/_max-width.scss?inline';
+import minHeight from '../../../../scss/tokens/sizing/_min-height.scss?inline';
+import minWidth from '../../../../scss/tokens/sizing/_min-width.scss?inline';
+import width from '../../../../scss/tokens/sizing/_width.scss?inline';
+
+<Meta title="Styles/Tokens/Sizing" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Sizing tokens
+
+<CopyTable
+  title="Width"
+  mdnLink="width"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(width)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Max-width"
+  mdnLink="max-width"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(maxWidth)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Min-width"
+  mdnLink="min-width"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(minWidth)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Height"
+  mdnLink="height"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(height)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Max-height"
+  mdnLink="max-height"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(maxHeight)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Min-height"
+  mdnLink="min-height"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(minHeight)}
+  copyable={[true, false]}
+/>

package/dist/docs/styles/tokens/spacers/main.mdx

@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../../utils/docsPage.js';
+import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
+import { cssStringToTableArray } from '../../../utils/parseCss';
+import margin from '../../../../scss/tokens/spacers/_margin.scss?inline';
+import padding from '../../../../scss/tokens/spacers/_padding.scss?inline';
+import fluidMargin from '../../../../scss/tokens/spacers/_fluid-margin.scss?inline';
+import fluidPadding from '../../../../scss/tokens/spacers/_fluid-padding.scss?inline';
+
+<Meta title="Styles/Tokens/Spacers" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Spacer tokens
+
+Spacers include tokens that control static and fluid margins and paddings.
+
+### What's the difference between "static" and "fluid"?
+
+**Static** margin/padding tokens set values that don't change with the size of the viewport. These tokens are best for creating space between block-like elements — divs, pictures, videos, graphics, etc. The tables below contain dozens of levels so you can finely tune spacing, but their values also are at intervals that help you maintain consistent balance on your page.
+
+**Fluid** token values _do change_ depending on the size of the device and are specifically designed to pair with our fluid font sizes. These tokens have fewer available levels to help make sure our typography is consistent.
+
+As a rule of thumb, if you're setting space between or adjacent to _text elements_, you'll likely want to use **fluid tokens** (`Fluid margin`/`Fluid padding` tables). If you're setting space between _block-like elements_, you probably want **static tokens** (`Margin`/`Padding`).
+
+---
+
+<CopyTable
+  title="Margin"
+  mdnLink="margin"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(margin)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Padding"
+  mdnLink="padding"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(padding)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Fluid margin"
+  mdnLink="margin"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(fluidMargin, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
+
+<CopyTable
+  title="Fluid padding"
+  mdnLink="margin"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(fluidPadding, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>

package/dist/docs/styles/tokens/styles.scss

@@ -0,0 +1,9 @@
+div.storybook-mermaid-graph {
+  text,
+  span {
+    font-size: 14px;
+  }
+  p {
+    margin: 0;
+  }
+}

package/dist/docs/styles/tokens/typography/main.mdx

@@ -0,0 +1,147 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../../utils/docsPage.js';
+import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
+import { cssStringToTableArray } from '../../../utils/parseCss';
+import role from '../../../../scss/tokens/text/_text-role.scss?inline';
+import color from '../../../../scss/tokens/text/_color.scss?inline';
+import fontFamily from '../../../../scss/tokens/text/_font-family.scss?inline';
+import fontSize from '../../../../scss/tokens/text/_font-size.scss?inline';
+import fontStyle from '../../../../scss/tokens/text/_font-style.scss?inline';
+import fontWeight from '../../../../scss/tokens/text/_font-weight.scss?inline';
+import letterSpacing from '../../../../scss/tokens/text/_letter-spacing.scss?inline';
+import lineHeight from '../../../../scss/tokens/text/_line-height.scss?inline';
+import textAlign from '../../../../scss/tokens/text/_text-align.scss?inline';
+import textDecoration from '../../../../scss/tokens/text/_text-decoration.scss?inline';
+import textStroke from '../../../../scss/tokens/text/_text-stroke.scss?inline';
+import textTransform from '../../../../scss/tokens/text/_text-transform.scss?inline';
+import verticalAlign from '../../../../scss/tokens/text/_vertical-align.scss?inline';
+import whiteSpace from '../../../../scss/tokens/text/_white-space.scss?inline';
+import wordBreak from '../../../../scss/tokens/text/_word-break.scss?inline';
+
+import './styles.scss';
+
+<Meta title="Styles/Tokens/Typography" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Typography tokens
+
+<CopyTable
+  title="Role"
+  note="Role tokens group several individual style tokens for common text elements like headers, body text, notes and links. You can use them as a shorthand for our default typography styles."
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(role, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
+
+<CopyTable
+  title="Colour"
+  mdnLink="color"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(color, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
+
+<CopyTable
+  title="Font family"
+  mdnLink="font-family"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(fontFamily, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
+
+<CopyTable
+  title="Font size"
+  mdnLink="font-size"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(fontSize, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
+
+<CopyTable
+  title="Font style"
+  mdnLink="font-style"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(fontStyle)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Font weight"
+  mdnLink="font-weight"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(fontWeight, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
+
+<CopyTable
+  title="Letter spacing"
+  mdnLink="letter-spacing"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(letterSpacing, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
+
+<CopyTable
+  title="Line height"
+  mdnLink="line-height"
+  header={['Class', 'Include', 'Properties']}
+  body={cssStringToTableArray(lineHeight, true)}
+  copyable={[true, (t) => `@include ${t};`, false]}
+/>
+
+<CopyTable
+  title="Text align"
+  mdnLink="text-align"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(textAlign)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Text decoration"
+  mdnLink="text-decoration"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(textDecoration)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Text stroke"
+  mdnLink="text-stroke"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(textStroke)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Text transform"
+  mdnLink="text-transform"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(textTransform)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Vertical align"
+  mdnLink="vertical-align"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(verticalAlign)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="White space"
+  mdnLink="white-space"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(whiteSpace)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Word break"
+  mdnLink="word-break"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(wordBreak)}
+  copyable={[true, false]}
+/>

package/dist/docs/styles/tokens/typography/styles.scss

@@ -0,0 +1,9 @@
+div.type-system-demo {
+  *:first-child {
+    margin-top: 0;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}

package/dist/docs/styles/tokens/variables/main.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../../utils/docsPage.js';
+import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
+import { scssVariablesToTableArray } from '../../../utils/parseCss';
+
+import theme from '../../../../scss/tokens/variables/_theme.scss?raw';
+import block from '../../../../scss/tokens/variables/_block.scss?raw';
+
+<Meta title="Styles/Tokens/SCSS Variables" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Token variables
+
+These are SCSS mirrors of some of the default CSS variables used in the `Theme`. Use them in places where CSS variables cannot be used. e.g. You can write `media-queries` to target the block widths using the `block` vars, which is not possible using CSS variables.
+
+<CopyTable
+  title="Theme"
+  header={['Variable', 'Properties']}
+  body={scssVariablesToTableArray(theme)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Block"
+  header={['Variable', 'Properties']}
+  body={scssVariablesToTableArray(block)}
+  copyable={[true, false]}
+/>

package/dist/docs/theme-builder/theme-builder.mdx

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../utils/docsPage.js';
+
+import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx';
+
+<Meta title="Theming/Theme builder" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Theme builder
+
+Use this tool to create a custom theme for your page then update the `Theme` component in your project.
+
+<ThemeBuilder />

package/dist/docs/theming/css-variables.mdx

@@ -0,0 +1,107 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../utils/docsPage.js';
+
+<Meta title="Theming/CSS variables" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# CSS variables
+
+The [`Theme`](?path=/docs/components-theme--default) component uses **[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)** to control major parts of your page's theme.
+
+All other components in this library use those variables for styling basic colours and typography, helping keep our pages uniform and making it easier to customise the theme. CSS variables also allow our clients to easily change elements of our theme to match their brand.
+
+This doc explains which variables are set and how you can use them in custom components you create.
+
+> **Note:** CSS variables do not currently affect [ai2svelte](https://github.com/reuters-graphics/ai2svelte/) graphics, so you should continue to make sure your colours match the theme of your page directly in Adobe Illustrator for those graphics.
+
+## Using CSS variables directly
+
+If you're new to how CSS variables work, [here's a video](https://www.youtube.com/watch?v=PHO6TBq_auI) that does a decent job explaining what they are, how they work and why they're useful.
+
+You can use any of the CSS variables the `Theme` component sets in your own code with the [`var()`](https://www.w3schools.com/css/css3_variables.asp) function.
+
+```svelte
+<p>My custom text</p>
+
+<style lang="scss">
+  p {
+    color: var(--theme-colour-text-primary);
+    font-family: var(--theme-font-family-sans-serif);
+  }
+</style>
+```
+
+## Customising variables
+
+You can redefine any of the above CSS variables in the `<Theme>` component. Read more in [the docs](/docs/theming-theme--custom-theme) and **use the [Theme builder](/docs/theming-theme-builder--docs)**.
+
+```svelte
+<Theme
+  base="light"
+  theme="{{
+    colour: {
+      // This replaces the default text-secondary colour '#666666' for light theme
+      'text-secondary': '#213310',
+    },
+  }}"
+>
+  <!-- page stuff -->
+</Theme>
+```
+
+## Adding extra variables
+
+You can even add custom variables through the `Theme` component.
+
+For example, let's say you want to define a border radius for some card elements on your page. You can add a custom property to the `theme` prop like this:
+
+```svelte
+<Theme
+  base="light"
+  theme="{{
+    style: {
+      'border-radius': '22px',
+    },
+  }}"
+>
+  <!-- page stuff -->
+</Theme>
+```
+
+... and then access the CSS variable in your code like this:
+
+```svelte
+<div class="card"></div>
+
+<style lang="scss">
+  .card {
+    border-radius: var(--theme-style-border-radius);
+  }
+</style>
+```
+
+Using the `Theme` component for your own CSS variables helps unify important style values across a project. It also lets clients more easily customise those values for whatever matches their brand.
+
+You can also change a variable's value based on some condition. For example, to set a smaller border radius on mobile screens, you might:
+
+```svelte
+<script>
+  // other code
+
+  let windowWidth;
+</script>
+
+<svelte:window bind:innerWidth="{windowWidth}" />
+
+<Theme
+  base="light"
+  theme="{{
+    style: {
+      'border-radius': windowWidth > 475 ? '22px' : '11px',
+    },
+  }}"
+>
+  <!-- page stuff -->
+</Theme>
+```