diff --git a/doczrc.js b/doczrc.js index 1c0a49d8..a5a8ddbb 100644 --- a/doczrc.js +++ b/doczrc.js @@ -244,14 +244,14 @@ export default { }, a: { '&:active': { - color: 'var(--rui-color-action-link-active)', + color: 'var(--rui-color-text-link-active)', textDecoration: 'var(--rui-text-decoration-link-active)', }, '&:hover': { - color: 'var(--rui-color-action-link-hover)', + color: 'var(--rui-color-text-link-hover)', textDecoration: 'var(--rui-text-decoration-link-hover)', }, - color: 'var(--rui-color-action-link)', + color: 'var(--rui-color-text-link)', textDecoration: 'var(--rui-text-decoration-link)', }, root: { diff --git a/src/docs/customize/theming/overview.mdx b/src/docs/customize/theming/overview.mdx index f726fe66..4e7816a3 100644 --- a/src/docs/customize/theming/overview.mdx +++ b/src/docs/customize/theming/overview.mdx @@ -8,40 +8,34 @@ route: /customize/theming/overview # Theming From the very beginning, React UI has been designed with a great emphasis on -customizability. We decided to leverage CSS custom properties for this feature +customizability. We decided to leverage [CSS custom properties] for this feature for two main reasons: -1. We take advantage of possibilities of **native CSS**. Preprocessors are still - a thing, but it's not necessary to go as far as for CSS-in-JS to make a UI - customizable. +1. We take advantage of the possibilities of **native CSS**. Preprocessors are + still a thing, but it's not necessary to go as far as for CSS-in-JS to make + a UI customizable, not even speaking of performance. 2. Thanks to JavaScript API, CSS custom properties are both **readable and writable by JS**. ## Theming Options -[Design tokens](/foundation/design-tokens) are used to define common visual -properties like colors, fonts, borders, shadows, or spacing. CSS custom -properties are the technical representation of the design tokens in React UI. +[Design tokens](/foundation/design-tokens) define common visual properties like +colors, fonts, borders, shadows, or spacing. [CSS custom properties] are the +technical representation of the design tokens in React UI. -All CSS custom properties in React UI come prefixed with `rui-` so they don't -get in way of other custom properties in your project. - -Just like the design tokens, the custom properties come grouped according to -their type: - -1. alias design tokens, -2. component-specific tokens. +All CSS custom properties in React UI come prefixed with `rui` so they don't +get in the way of other custom properties in your project. You can adjust any of the properties in your styles. See the [default theme] for -the full list of available custom properties. +the full list of available design tokens. -### Alias Design Tokens +### Global and Semantic Design Tokens -The alias token names are not complex nor long, so they are simply lowercase and -hyphenated. +Global and semantic token names are not complex or long. That is why they are +simply lowercase and hyphenated. -The alias token names are written in the following format: +The names are written in the following format: `--rui--[]--[]` @@ -50,15 +44,15 @@ Where: - `` is one of: `color`, `dimension`, `font-family`, `font-weight`, `shadow`, as suggested by the [Design Tokens Format][dtf] proposal. However, additional custom types like `font-size`, `line-height`, or `text-decoration` - are also used as they prove necessary. + have been added as they proved necessary. - `` optionally groups multiple related values, e.g. `text`, `background`, `action`, etc. - `` is the name of the token, e.g. `primary`, `base`, or `light`. Scales can be presented as numbered sequences, e.g. `space-[0-7]`, `size-[1-6]`, etc. - `` describes additional interaction variants of the token: `hover`, - `active`, `disabled`. + `focus`, `active`, or `disabled`. -Example alias design tokens represented by CSS custom properties: +Example global and semantic design tokens represented by CSS custom properties: ```css :root { @@ -68,25 +62,26 @@ Example alias design tokens represented by CSS custom properties: } ``` -οΈπŸ‘‰ Please note that **breakpoint values are exported as read-only** since CSS -custom properties [cannot be used within media queries][w3c-custom-properties] -(because a media query is not a CSS property). +οΈπŸ‘‰ Please note that **breakpoint values are read-only** (e.g. for JavaScript) +since CSS custom properties +[cannot be used within media queries][w3c-custom-properties] (because a media +query is not a CSS property). -### Component-Specific Tokens +### Component Tokens It is also possible to adjust some properties on individual components level, -preferably by reusing (inheriting) the alias design tokens. +preferably by reusing (inheriting) the semantic design tokens. -Due to higher complexity, component-specific tokens use a naming convention that -many web developers will find familiar because it works like [BEM] (with -prefixes and component name syntax taken from [SUIT CSS], to be precise): +Due to higher complexity, component tokens use a naming convention that many web +developers will find familiar because it works like [BEM] (with prefixes and +component name syntax taken from [SUIT CSS], to be precise): `--rui---[]__[]--[]__--[]` Where: -- `` stands for actual component name (e.g. `Button`, - `FormField` etc.) with a reasonable exception to form fields whose settings +- `` stands for the actual component name (e.g. `Button`, + `FormField`, etc.) with a reasonable exception to form fields whose settings are widely shared and therefore grouped as `FormField` options. - `` can be one or more modifiers, typically a variant (e.g. `primary`, `filled`, `box`) or interaction state (`default`, `hover`, @@ -97,7 +92,7 @@ Where: where a CSS property wouldn't tell enough (e.g. `initial-offset`, `check-background-color`, `tap-target-size`). -Example component-specific custom properties: +Example component tokens: ```css :root { @@ -112,10 +107,29 @@ Example component-specific custom properties: } ``` -### CSS, or SCSS? +## Best Practices + +1. It's a good idea to start with changing the **global tokens first**. Adjust + any context-agnostic values to see how the system reacts and scales. + +2. Widely reused context-aware settings such as semantic colors, typography, or + borders define the character of your design system which is stored in the + **semantic tokens** layer. + +3. Having finished the customization at the global and semantic level, you can + **then proceed to customize the appearance of individual components** β€” if + necessary at all. + + Even then you should also reuse existing semantic design tokens as much as + possible to ensure that your UI is consistent and works as a system. + + For the same reason, if you have any custom components in your UI, you should + **reuse the semantic design tokens in your own CSS** too. + +## CSS, or Sass? Colors, breakpoints, and SVG definitions used in `theme.scss` are preprocessed -with SCSS first. This enables us to: +with Sass first. This enables us to: - generate our internal color palette programmatically, - keep actual breakpoint values in a single place in the code, @@ -123,7 +137,7 @@ with SCSS first. This enables us to: It's entirely up to you what format you decide to use for storing the theme. Both `theme.scss` and `theme.css` will work equally well. It only matters if the -custom properties make it from the theme file to browser. +custom properties make it from the theme file to the browser. πŸ‘‰ Just remember everything in the [theme constants] directory is intended only for usage within `theme.scss`. Otherwise, the theming system may not work as @@ -131,22 +145,9 @@ expected. We recommend calling custom properties from `theme.scss` either directly in your stylesheet, or through an intermediate, shareable layer like `MyComponent/_theme.scss` or `styles/shared-by-components/_my-sass-variables-referring-to-theme.scss` -(latter of which is the approach we use). - -## Best Practices - -It's a good idea to start with changing the **alias design tokens first**. -Widely reused settings such as colors, typography, borders, or spacing values -should be adjusted first because they define basic appearance of all components. - -Having finished the customization at the global level, you can **then proceed to -customizing the appearance of individual components** β€” if necessary at all. -Even then you should also reuse existing alias design tokens as much as -possible to ensure that your UI is consistent and works as a system. - -For the same reason, if you have any custom components in your UI, you should -**reuse the alias design tokens in your own CSS** too. +(the latter of which is the approach we use). +[CSS custom properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties [default theme]: https://github.com/react-ui-org/react-ui/blob/master/src/lib/theme.scss [dtf]: https://design-tokens.github.io/community-group/format/ [theme constants]: https://github.com/react-ui-org/react-ui/blob/master/src/lib/styles/theme-constants diff --git a/src/docs/foundation/accessibility.mdx b/src/docs/foundation/accessibility.mdx index f7f9861c..b09571e0 100644 --- a/src/docs/foundation/accessibility.mdx +++ b/src/docs/foundation/accessibility.mdx @@ -18,12 +18,11 @@ The active area of interactive elements should be properly sized so that the elements can be easily targeted on touch screens. Recommended dimensions may vary from platform to platform, however a commonly used size is 7–10 mm. -Default tap target size in React UI is set to **10 mm** and is used by all -potentially small interactive components like [Alert](/components/alert) -close button, [CheckboxField](/components/checkbox-field), or -[Toggle](/components/toggle). Tap target size can be adjusted via the -`--rui-dimension-tap-target-size` custom property (see -[Theming](/customize/theming/overview) to learn how). +Default tap target size in React UI is used by all potentially small interactive +components like [Alert](/components/alert) close button, +[CheckboxField](/components/checkbox-field), or [Toggle](/components/toggle). +Tap target size can be adjusted via the `--rui-dimension-tap-target-size` +custom property (see [Theming](/customize/theming/overview) to learn how). πŸ“– [Read more about touch targets at Norman Nielsen Group.][nn-group] diff --git a/src/docs/foundation/colors.mdx b/src/docs/foundation/colors.mdx index adde68f3..c2ff1710 100644 --- a/src/docs/foundation/colors.mdx +++ b/src/docs/foundation/colors.mdx @@ -10,7 +10,7 @@ import Swatch from '../_components/Swatch' Colors help you communicate the structure of your UI, emphasize any important information, or signal different states of the UI. **Use colors intentionally** -β€” they are not a decoration, they should always serve a purpose. +β€” they are not decoration and should always serve a purpose. πŸ‘‰ All colors on this page can be changed by [overriding](/customize/theming/overview) values in your @@ -18,25 +18,32 @@ information, or signal different states of the UI. **Use colors intentionally** ## General Guidelines -- **All colors in React UI are strictly semantic: they always target a specific - use case. You are encouraged to apply any color palettes you want and map them - onto the semantic colors of React UI.** -- In general, all colors in React UI are for either **static** (text colors and - most of the background colors) or **interactive** use cases (action colors, - feedback colors). However, some colors are designed to be either of them: - neutral colors can be used for both static and interactive parts, similarly to - primary border color. +- **Most colors in React UI are semantic: they bear a meaning and target a + specific use case.** The only non-semantic exception is the + [neutral colors](#neutral-colors) that are included in React UI due to their + frequent usage in UI designs. +- **React UI does not try to suggest any global color palettes.** Instead, you + are encouraged to pick any color palettes you want and map them onto the + semantic colors of React UI. +- In general, colors in React UI can be used for either **static** + (most of the [text colors](#text-colors) and most of the + [background colors](#background-colors)) or **interactive** use cases + ([action colors](#action-colors), [feedback colors](#feedback-colors)). + However, some colors are designed to be either: + [neutral colors](#neutral-colors) can be used for static and interactive parts + similarly to the primary [border color](#border-colors). - Interactive color variants always define **hover** and **active** (pressed) states. -- Many colors suggest **what color should be used for text** placed on them. You - don't have to think if black or white is better β€” just use `on-primary` for - text on primary color background or `on-success` for success color background, - and you should be safe. +- Action, feedback, and neutral colors suggest **what color should be used** for + the text placed on them. You don't have to think if black or white makes a + better contrast β€” just use `on-primary` for text on primary color background + or `on-success` for success color background, and you should be safe. ## Text Colors -Colors reserved for text. The text can have primary or secondary priority. Both -priorities can be suppressed with the `disabled` variants. +Colors reserved for text. Base text can have primary or secondary priority, +while both priorities can be suppressed with the `disabled` variants. Last but +not least, the text colors define the color of links.
@@ -44,13 +51,17 @@ priorities can be suppressed with the `disabled` variants.
+
+ + + +
## Action Colors Action colors communicate the **importance** of an action which can be primary -or secondary. Using the `selected` color, you can also mark an action as the one -currently selected. Last but not least, the action colors define the color of -links, too. +or secondary. Using the _selected_ color, you can also mark an action as the +currently selected.
@@ -70,17 +81,12 @@ links, too.
-
- - - -
## Feedback Colors -Feedback colors help communicate a **meaning**: green means success, orange -means warning, and red means danger or error. On top of that, there are a few -more feedback colors to fit various situations. +Feedback colors help communicate a meaning: green means success, orange means +warning, and red means danger or error. On top of that, there are a few more +feedback colors to fit various design situations.
@@ -144,7 +150,7 @@ Colors reserved for backgrounds. ### Content Layers -Backgrounds for the fundamental UI areas and layered content. +Backgrounds for the fundamental UI areas and content layering. πŸ‘‰ Content layers can be separated from background using their [shadow counterparts](/foundation/shadows): `background-layer-1` + @@ -173,8 +179,8 @@ the _basic_ background is the default go-to background for components. Backgrounds to highlight interactive areas on hover and during interaction. -πŸ’‘ Please note the default interactive background is always transparent so it -does not get in the way of the underlying component background. +πŸ’‘ Please note the default interactive background is always transparent, so it +does not stand in the way of the underlying component background.
@@ -229,15 +235,14 @@ primary border. ## Applying Colors -Components can apply colors above using one or more of the following color -palettes. +Components can apply colors above using one or more following color groups. ### Component Colors Some components ([Alert](/components/alert), [Badge](/components/badge), [Button](/components/button), and more) come in more color variants to help you -better reflect their importance or nature of their content. Following colors -are available in such cases: +better reflect their place in content hierarchy or the meaning of their content. +Following colors are available in such cases: - **action colors (actionable components only):** `primary`, `secondary`, and `selected`, @@ -245,7 +250,7 @@ are available in such cases: `note`, - **neutral colors:** `light` and `dark`. -There is always a reasonable default for the component in question which can be +There is always a reasonable default for the component in question that can be changed to any of supported values above through the `color` prop. ### Validation States @@ -259,5 +264,5 @@ apply selected [feedback colors](#feedback-colors) for individual states: - `warning` feedback color for **warning** state, - `danger` feedback color for **invalid** state. -Validation state is always optional so default styling is applied for the +Validation state is always optional. Default styling is applied for the given component when its `validationState` prop is not specified. diff --git a/src/docs/foundation/design-tokens.mdx b/src/docs/foundation/design-tokens.mdx index e9edc0f9..e4c5a39d 100644 --- a/src/docs/foundation/design-tokens.mdx +++ b/src/docs/foundation/design-tokens.mdx @@ -9,37 +9,32 @@ route: /foundation/design-tokens Design tokens are a [methodology] for **expressing design decisions** in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies. They help establish a common vocabulary across -organisations. +organizations. -React UI features dozens of design tokens, represented by -[CSS custom properties](/customize/theming/overview), to help you customize the -system according your design needs. +πŸ‘‰ Design tokens are your starting point for +[customization](/customize/theming/overview) of React UI to make it fit your +design system needs. React UI uses CSS custom properties as a primary storage +format for design tokens. ## Design Token Types ### Global Tokens -Global tokens represent the basic, context-agnostic decisions in your design +Global tokens represent the basic, context-agnostic values in your design language. They define color palettes, typography scales, or spacing values, without binding them to any semantic meaning. -πŸ’‘ **Global tokens are not part of React UIβ€”they are part of your design -system.** - ```css :root { --pantone-3145c: #00778b; } ``` -### Alias Tokens - -Alias tokens are special variables that define the smallest -pieces of a design language, especially colors, typography, or spacing, for a -specific context. +### Semantic Tokens -πŸ‘‰ **Alias tokens are your starting point for -[customization](/customize/theming/overview) of React UI.** +Semantic tokens define roles and decisions that give the design system its +character. They communicate the intended purpose of a global token and are often +reused by component tokens. ```css :root { @@ -47,12 +42,11 @@ specific context. } ``` -### Component-specific Tokens +### Component Tokens -Representation of values associated with a component. They often inherit from -alias tokens. Once you are done with the -[customization](/customize/theming/overview) of the alias tokens, you can -further fine-tune the components by adjusting the component-specific tokens. +Component tokens represent the values associated with a component. They often +inherit from semantic tokens, but are named in a way that narrows down their +reusability to the context of the specific component. ```css :root { diff --git a/src/docs/foundation/spacing.mdx b/src/docs/foundation/spacing.mdx index c52d600f..2bc3b34e 100644 --- a/src/docs/foundation/spacing.mdx +++ b/src/docs/foundation/spacing.mdx @@ -23,7 +23,7 @@ overriding values in the | 4 | 1 rem | `--rui-dimension-space-4` | `spacing.of(4)` | `class="mt-4"` | | 5 | 1.5 rem | `--rui-dimension-space-5` | `spacing.of(5)` | `class="mt-5` | | 6 | 2 rem | `--rui-dimension-space-6` | `spacing.of(6)` | `class="mt-6` | -| 7 | 3 rem | `--rui-dimension-space-7` | `spacing.of(7)` | `class="mt-7"` | +| 7 | 2.5 rem | `--rui-dimension-space-7` | `spacing.of(7)` | `class="mt-7"` | \* For the sake of brevity, usage in HTML only illustrates the top margin property. See [Spacing helpers](/css-helpers/spacing) for the full list of diff --git a/src/lib/components/Modal/ModalCloseButton.scss b/src/lib/components/Modal/ModalCloseButton.scss index 1f999ebf..f4733cf6 100644 --- a/src/lib/components/Modal/ModalCloseButton.scss +++ b/src/lib/components/Modal/ModalCloseButton.scss @@ -13,6 +13,6 @@ color: inherit; &:disabled { - cursor: var(--rui-cursor-disabled); + cursor: var(--rui-cursor-not-allowed); } } diff --git a/src/lib/styles/theme-constants/_colors.scss b/src/lib/styles/theme-constants/_colors.scss index f98a75a0..50919a57 100644 --- a/src/lib/styles/theme-constants/_colors.scss +++ b/src/lib/styles/theme-constants/_colors.scss @@ -1,4 +1,4 @@ -// ⚠️ For `theme.scss` purposes only, do not use anywhere else. +// ⚠️ FOR `theme.scss` PURPOSES ONLY. DO NOT USE AS A BASE FOR YOUR COLOR PALETTES OR ANYWHERE ELSE THAN IN THE THEME. @use "sass:color"; @use "../tools/colors"; @@ -25,6 +25,8 @@ $selected: #007bff; $focus: color.scale($selected, $alpha: -50%); +$transparent: transparent; + $success: #28a745; $warning: #ffc107; $danger: #dc3545; diff --git a/src/lib/styles/theme/_links.scss b/src/lib/styles/theme/_links.scss index 4d15fba5..189ae654 100644 --- a/src/lib/styles/theme/_links.scss +++ b/src/lib/styles/theme/_links.scss @@ -1,6 +1,6 @@ -$color: var(--rui-color-action-link); +$color: var(--rui-color-text-link); $decoration: var(--rui-text-decoration-link); -$hover-color: var(--rui-color-action-link-hover); +$hover-color: var(--rui-color-text-link-hover); $hover-decoration: var(--rui-text-decoration-link-hover); -$active-color: var(--rui-color-action-link-active); +$active-color: var(--rui-color-text-link-active); $active-decoration: var(--rui-text-decoration-link-active); diff --git a/src/lib/theme.scss b/src/lib/theme.scss index eaa18539..e5aa0fa3 100644 --- a/src/lib/theme.scss +++ b/src/lib/theme.scss @@ -6,14 +6,125 @@ :root { // ============================================================================================ // - // DESIGN TOKENS: SEMANTIC ALIASES // + // GLOBAL TOKENS // + // ============================================================================================ // + + // + // Dimensions + // ========== + + // Borders + --rui-dimension-border-width-1: 1px; + + // Breakpoints + // + // ⚠️ Breakpoints are read-only in CSS. Custom properties cannot be used within media queries + // since media query is not a property. + // https://www.w3.org/TR/css-variables-1/#using-variables + --rui-dimension-breakpoint-xs: #{breakpoints.$xs}; + --rui-dimension-breakpoint-sm: #{breakpoints.$sm}; + --rui-dimension-breakpoint-md: #{breakpoints.$md}; + --rui-dimension-breakpoint-lg: #{breakpoints.$lg}; + --rui-dimension-breakpoint-xl: #{breakpoints.$xl}; + --rui-dimension-breakpoint-x2l: #{breakpoints.$x2l}; + --rui-dimension-breakpoint-x3l: #{breakpoints.$x3l}; + + // Radii + --rui-dimension-radius-1: 0.25rem; + + // Spacing + --rui-dimension-space-0: 0; + --rui-dimension-space-1: 0.25rem; + --rui-dimension-space-2: 0.5rem; + --rui-dimension-space-3: 0.75rem; + --rui-dimension-space-4: 1rem; + --rui-dimension-space-5: 1.5rem; + --rui-dimension-space-6: 2rem; + --rui-dimension-space-7: 2.5rem; + + // + // Font Families + // ============= + + --rui-font-family-base: "Titillium Web", helvetica, roboto, arial, sans-serif; + --rui-font-family-monospace: + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "Liberation Mono", + "Courier New", + monospace; + + // + // Font Weights + // ============ + + --rui-font-weight-base: 400; + --rui-font-weight-light: 300; + --rui-font-weight-bold: 700; + + // + // Ratios + // ====== + + --rui-ratio-opacity-medium: 0.5; + + // + // Shadows + // ======= + + --rui-shadow-1: 0 0.01rem 0.65rem -0.1rem rgb(0 0 0 / 30%); + --rui-shadow-2: 0.2rem 0.25rem 1.2rem -0.1rem rgb(0 0 0 / 15%); + + // + // Other + // ===== + + // ⚠️ Non-standard token types! + // The DTF specification is still in the draft status, and the following token types have proven necessary. + // + // To be honest, some of these tokens are NOT context agnostic as required by the global tokens category. + // These will be probably superseded by semantic typography styles in the future. + + // Font sizes + --rui-font-size-base: 100%; + --rui-font-size-small: 0.889rem; + --rui-font-size-smaller: 0.75rem; + --rui-font-size-code: 85%; + + // Modular scale ratio: 1.125 / 8:9 / major second + --rui-font-size-1: 1rem; + --rui-font-size-2: 1.125rem; + --rui-font-size-3: 1.266rem; + --rui-font-size-4: 1.424rem; + --rui-font-size-5: 1.602rem; + --rui-font-size-6: 1.802rem; + + // Line heights + --rui-line-height-base: 1.5; + --rui-line-height-small: 1.25; + + // Text decorations + --rui-text-decoration-link: none; + --rui-text-decoration-link-hover: underline; + --rui-text-decoration-link-active: underline; + + // List styles + --rui-list-style-unordered: square; + + // Cursors + --rui-cursor-not-allowed: not-allowed; + + // ============================================================================================ // + // SEMANTIC TOKENS // // ============================================================================================ // // // Borders // ======= - --rui-border-focus-ring: 0.2em solid #{colors.$focus}; + --rui-border-focus-ring: var(--rui-dimension-space-1) solid #{colors.$focus}; // // Colors @@ -26,6 +137,9 @@ --rui-color-text-primary-disabled: #{colors.$gray-300}; --rui-color-text-secondary: #{colors.$gray-500}; --rui-color-text-secondary-disabled: #{colors.$gray-300}; + --rui-color-text-link: #{colors.$note}; + --rui-color-text-link-hover: #{colors.$note-dark}; + --rui-color-text-link-active: #{colors.$note-darker}; // Action colors --rui-color-action-primary: #{colors.$primary}; @@ -40,9 +154,6 @@ --rui-color-action-selected-hover: #{colors.$selected-dark}; --rui-color-action-selected-active: #{colors.$selected-darker}; --rui-color-action-on-selected: #{colors.$on-selected}; - --rui-color-action-link: #{colors.$note}; - --rui-color-action-link-hover: #{colors.$note-dark}; - --rui-color-action-link-active: #{colors.$note-darker}; // Feedback colors --rui-color-feedback-success: #{colors.$success}; @@ -86,7 +197,7 @@ --rui-color-background-layer-2: #{colors.$white}; --rui-color-background-basic: #{colors.$white}; --rui-color-background-disabled: #{colors.$gray-50}; - --rui-color-background-interactive: transparent; + --rui-color-background-interactive: #{colors.$transparent}; --rui-color-background-interactive-hover: #{colors.$gray-50}; --rui-color-background-interactive-active: #{colors.$gray-100}; --rui-color-background-primary: #{colors.$primary-light}; @@ -111,71 +222,20 @@ // Dimensions // ========== - // Borders - --rui-dimension-border-width-1: 1px; - - // Breakpoints - // - // ⚠️ Breakpoints are read-only in CSS. Custom properties cannot be used within media queries - // since media query is not a property. - // https://www.w3.org/TR/css-variables-1/#using-variables - --rui-dimension-breakpoint-xs: #{breakpoints.$xs}; - --rui-dimension-breakpoint-sm: #{breakpoints.$sm}; - --rui-dimension-breakpoint-md: #{breakpoints.$md}; - --rui-dimension-breakpoint-lg: #{breakpoints.$lg}; - --rui-dimension-breakpoint-xl: #{breakpoints.$xl}; - --rui-dimension-breakpoint-x2l: #{breakpoints.$x2l}; - --rui-dimension-breakpoint-x3l: #{breakpoints.$x3l}; - - // Radii - --rui-dimension-radius-1: 0.25rem; - - // Spacing - --rui-dimension-space-0: 0; - --rui-dimension-space-1: 0.25rem; - --rui-dimension-space-2: 0.5rem; - --rui-dimension-space-3: 0.75rem; - --rui-dimension-space-4: 1rem; - --rui-dimension-space-5: 1.5rem; - --rui-dimension-space-6: 2rem; - --rui-dimension-space-7: 3rem; + // Accessibility + --rui-dimension-focus-ring-offset: var(--rui-dimension-border-width-1); + --rui-dimension-tap-target-size: var(--rui-dimension-space-7); // Shared bottom spacings --rui-dimension-space-bottom-base: var(--rui-dimension-space-5); --rui-dimension-space-bottom-headings: var(--rui-dimension-space-5); --rui-dimension-space-bottom-layouts: var(--rui-dimension-space-5); - // Accessibility - --rui-dimension-focus-ring-offset: 1px; - --rui-dimension-tap-target-size: 10mm; - - // - // Font Families - // ============= - - --rui-font-family-base: "Titillium Web", helvetica, roboto, arial, sans-serif; - --rui-font-family-monospace: - "SFMono-Regular", - "Menlo", - "Monaco", - "Consolas", - "Liberation Mono", - "Courier New", - monospace; - - // - // Font Weights - // ============ - - --rui-font-weight-base: 400; - --rui-font-weight-light: 300; - --rui-font-weight-bold: 700; - // // Ratios // ====== - --rui-ratio-disabled-opacity: 0.5; + --rui-ratio-disabled-opacity: var(--rui-ratio-opacity-medium); // // Shadows @@ -183,48 +243,12 @@ // 1. Use `initial`, `revert` or `unset` to keep the original box shadow of the component. - --rui-shadow-layer-1: 0 0.01rem 0.65rem -0.1rem rgb(0 0 0 / 30%); - --rui-shadow-layer-2: 0.2rem 0.25rem 1.2rem -0.1rem rgb(0 0 0 / 15%); + --rui-shadow-layer-1: var(--rui-shadow-1); + --rui-shadow-layer-2: var(--rui-shadow-2); --rui-shadow-focus-ring: initial; // 1. - // - // Other - // ===== - - // ⚠️ Non-standard token types! - // The DTF specification is still in the draft status and the following token types have proven necessary. - - // Font sizes - --rui-font-size-base: 100%; - --rui-font-size-small: 0.889rem; - --rui-font-size-smaller: 0.75rem; - --rui-font-size-code: 85%; - - // Modular scale ratio: 1.125 / 8:9 / major second - --rui-font-size-1: 1rem; - --rui-font-size-2: 1.125rem; - --rui-font-size-3: 1.266rem; - --rui-font-size-4: 1.424rem; - --rui-font-size-5: 1.602rem; - --rui-font-size-6: 1.802rem; - - // Line heights - --rui-line-height-base: 1.5; - --rui-line-height-small: 1.25; - - // Text decorations - --rui-text-decoration-link: none; - --rui-text-decoration-link-hover: underline; - --rui-text-decoration-link-active: underline; - - // List styles - --rui-list-style-unordered: square; - - // Cursors - --rui-cursor-disabled: not-allowed; - // ============================================================================================ // - // COMPONENTS // + // COMPONENT TOKENS // // ============================================================================================ // // @@ -290,9 +314,9 @@ --rui-Button__border-width: var(--rui-dimension-border-width-1); --rui-Button__border-radius: var(--rui-dimension-radius-1); --rui-Button--disabled__opacity: var(--rui-ratio-disabled-opacity); - --rui-Button--disabled__cursor: var(--rui-cursor-disabled); + --rui-Button--disabled__cursor: var(--rui-cursor-not-allowed); --rui-Button--feedback__opacity: 1; - --rui-Button--feedback__cursor: var(--rui-cursor-disabled); + --rui-Button--feedback__cursor: var(--rui-cursor-not-allowed); // Buttons: filled priority @@ -784,7 +808,7 @@ --rui-FormField--horizontal--full-width__label__width: fit-content(50%); // Forms fields: disabled state - --rui-FormField--disabled__cursor: var(--rui-cursor-disabled); + --rui-FormField--disabled__cursor: var(--rui-cursor-not-allowed); --rui-FormField--disabled__opacity: var(--rui-ratio-disabled-opacity); // Form fields: validation states: invalid @@ -992,11 +1016,11 @@ // TextLink // ======== - --rui-TextLink__color: var(--rui-color-action-link); + --rui-TextLink__color: var(--rui-color-text-link); --rui-TextLink__text-decoration: var(--rui-text-decoration-link); - --rui-TextLink--hover__color: var(--rui-color-action-link-hover); + --rui-TextLink--hover__color: var(--rui-color-text-link-hover); --rui-TextLink--hover__text-decoration: var(--rui-text-decoration-link-hover); - --rui-TextLink--active__color: var(--rui-color-action-link-active); + --rui-TextLink--active__color: var(--rui-color-text-link-active); --rui-TextLink--active__text-decoration: var(--rui-text-decoration-link-active); //