chore: update tokens 1.7.0

NOTICE.txt

@@ -48,10 +48,10 @@ ouds_theme_orange/assets/ic_heart.svg
 ouds_theme_orange/assets/ic_radio-button_selected.svg
 ouds_theme_orange/assets/ic_search.svg
 ouds_theme_orange/assets/ic_switch_selected.svg
-ouds_theme_orange/assets/ic_tick.svg
+ouds_theme_orange/assets/ic_success.svg
 ouds_theme_orange/assets/ic_positive.svg
-ouds_theme_orange/assets/ic_info.svg
-ouds_theme_orange/assets/ic_warning.svg
+ouds_theme_orange/assets/ic_information.svg
+ouds_theme_orange/assets/ic_important.svg
 ouds_theme_orange/assets/ic_error.svg
 ouds_theme_orange/assets/ic_heart.svg
 ouds_theme_orange/assets/ic_bullet_rounded.svg
@@ -84,10 +84,10 @@ ouds_theme_sosh/assets/ic_heart.svg
 ouds_theme_sosh/assets/ic_radio-button_selected.svg
 ouds_theme_sosh/assets/ic_search.svg
 ouds_theme_sosh/assets/ic_switch_selected.svg
-ouds_theme_sosh/assets/ic_tick.svg
+ouds_theme_sosh/assets/ic_success.svg
 ouds_theme_sosh/assets/ic_positive.svg
-ouds_theme_sosh/assets/ic_info.svg
-ouds_theme_sosh/assets/ic_warning.svg
+ouds_theme_sosh/assets/ic_information.svg
+ouds_theme_sosh/assets/ic_important.svg
 ouds_theme_sosh/assets/ic_error.svg
 ouds_theme_sosh/assets/ic_heart.svg
 ouds_theme_sosh/assets/ic_bullet_tag.svg
@@ -99,6 +99,42 @@ ouds_theme_sosh/fonts/Sosh-Medium.ttf
 ouds_theme_sosh/fonts/Sosh-Regular.ttf
 ouds_theme_sosh/fonts/Sosh-Thin.ttf
 
+## OUDS / Themes / Wireframe
+ouds_theme_wireframe/assets/ic_bullet.svg
+ouds_theme_wireframe/assets/ic_bullet_nested_1.svg
+ouds_theme_wireframe/assets/ic_bullet_nested_2.svg
+ouds_theme_wireframe/assets/ic_checkbox_selected.svg
+ouds_theme_wireframe/assets/ic_checkbox_undeterminate.svg
+ouds_theme_wireframe/assets/ic_chevron_down.svg
+ouds_theme_wireframe/assets/ic_chevron_left.svg
+ouds_theme_wireframe/assets/ic_chevron_right.svg
+ouds_theme_wireframe/assets/ic_chevron_up.svg
+ouds_theme_wireframe/assets/ic_delete.svg
+ouds_theme_wireframe/assets/ic_heart.svg
+ouds_theme_wireframe/assets/ic_radio-button_selected.svg
+ouds_theme_wireframe/assets/ic_search.svg
+ouds_theme_wireframe/assets/ic_switch_selected.svg
+ouds_theme_wireframe/assets/ic_success.svg
+ouds_theme_wireframe/assets/ic_positive.svg
+ouds_theme_wireframe/assets/ic_information.svg
+ouds_theme_wireframe/assets/ic_important.svg
+ouds_theme_wireframe/assets/ic_error.svg
+ouds_theme_wireframe/assets/ic_heart.svg
+ouds_theme_wireframe/assets/ic_bullet_tag.svg
+ouds_theme_wireframe/assets/ic_important_alert.svg
+
+ouds_theme_wireframe/fonts/ShantellSans-Bold.ttf
+ouds_theme_wireframe/fonts/ShantellSans-BoldItalic.ttf
+ouds_theme_wireframe/fonts/ShantellSans-ExtraBold.ttf
+ouds_theme_wireframe/fonts/ShantellSans-ExtraBoldItalic.ttf
+ouds_theme_wireframe/fonts/ShantellSans-Italic.ttf
+ouds_theme_wireframe/fonts/ShantellSans-Light.ttf
+ouds_theme_wireframe/fonts/ShantellSans-LightItalic.ttf
+ouds_theme_wireframe/fonts/ShantellSans-Medium.ttf
+ouds_theme_wireframe/fonts/ShantellSans-MediumItalic.ttf
+ouds_theme_wireframe/fonts/ShantellSans-Regular.ttf
+ouds_theme_wireframe/fonts/ShantellSans-SemiBold.ttf
+ouds_theme_wireframe/fonts/ShantellSans-SemiBoldItalic.ttf
 
 ## OUDS / core
 ouds_core/assets/doc/ic_favicon.ico

app/CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [DemoApp][Library] Tokens: `link` and `linkMono` ([#390](https://github.com/Orange-OpenSource/ouds-flutter/issues/#390))
 
 ### Changed
+- [Library] Update tokens 1.7.0 ([#357](https://github.com/Orange-OpenSource/ouds-flutter/issues/422))
 - [Tool] Change the favicon to orange favicon in the documentation ([#371](https://github.com/Orange-OpenSource/ouds-flutter/issues/371))
 
 ### Fixed

app/lib/l10n/gen/ouds_flutter_app_localizations.dart

@@ -290,12 +290,6 @@ abstract class AppLocalizations {
   /// **'Content'**
   String get app_tokens_color_content_label;
 
-  /// Do not translate this string
-  ///
-  /// In en, this message translates to:
-  /// **'Decorative'**
-  String get app_tokens_color_decorative_label;
-
   /// Do not translate this string
   ///
   /// In en, this message translates to:

app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart

@@ -106,9 +106,6 @@ class AppLocalizationsAr extends AppLocalizations {
   @override
   String get app_tokens_color_content_label => 'Content';
 
-  @override
-  String get app_tokens_color_decorative_label => 'Decorative';
-
   @override
   String get app_tokens_color_overlay_label => 'Overlay';
 

app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart

@@ -106,9 +106,6 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get app_tokens_color_content_label => 'Content';
 
-  @override
-  String get app_tokens_color_decorative_label => 'Decorative';
-
   @override
   String get app_tokens_color_overlay_label => 'Overlay';
 

app/lib/l10n/ouds_flutter_en.arb

@@ -59,10 +59,6 @@
   "@app_tokens_color_content_label": {
     "description": "Do not translate this string"
   },
-  "app_tokens_color_decorative_label": "Decorative",
-  "@app_tokens_color_decorative_label": {
-    "description": "Do not translate this string"
-  },
   "app_tokens_color_overlay_label": "Overlay",
   "@app_tokens_color_overlay_label": {
     "description": "Do not translate this string"

app/lib/ui/components/component_container.dart

@@ -32,7 +32,7 @@ class ComponentContainer extends StatelessWidget {
               minHeight: 180,
             ),
             child: Container(
-              color: theme.colorScheme(context).surfaceStatusNeutralMuted,
+              color: theme.colorScheme(context).surfaceSecondary,
               child: Align(
                 child: IgnorePointer(
                   child: child,

app/lib/ui/theme/theme_controller.dart

@@ -14,6 +14,7 @@ import 'package:flutter/material.dart';
 import 'package:ouds_theme_contract/ouds_theme_contract.dart';
 import 'package:ouds_theme_orange/orange_theme.dart';
 import 'package:ouds_theme_sosh/ouds_theme_sosh.dart';
+import 'package:ouds_theme_wireframe/ouds_theme_wireframe.dart';
 
 class ThemeController extends ChangeNotifier with WidgetsBindingObserver {
   ThemeMode _themeMode = ThemeMode.system;
@@ -150,6 +151,8 @@ class ThemeController extends ChangeNotifier with WidgetsBindingObserver {
       return OrangeTheme();
     } else if (currentType == SoshTheme) {
       return SoshTheme();
+    } else if (currentType == WireframeTheme) {
+      return WireframeTheme();
     } else {
       return OrangeTheme(); // Default to OrangeTheme
     }

app/lib/ui/theme/theme_selector.dart

@@ -17,6 +17,7 @@ import 'package:ouds_flutter_demo/ui/theme/theme_controller.dart';
 import 'package:ouds_flutter_demo/ui/utilities/app_assets.dart';
 import 'package:ouds_theme_orange/orange_theme.dart';
 import 'package:ouds_theme_sosh/ouds_theme_sosh.dart';
+import 'package:ouds_theme_wireframe/ouds_theme_wireframe.dart';
 import 'package:provider/provider.dart';
 
 class ThemeSelector extends StatelessWidget {
@@ -52,6 +53,8 @@ class ThemeSelector extends StatelessWidget {
               themeController.setTheme(OrangeTheme());
             } else if (selectedValue == SoshTheme().name) {
               themeController.setTheme(SoshTheme());
+            } else if (selectedValue == WireframeTheme().name) {
+              themeController.setTheme(WireframeTheme());
             }
           },
           itemBuilder: (BuildContext context) {
@@ -93,6 +96,25 @@ class ThemeSelector extends StatelessWidget {
                   ),
                 ),
               ),
+
+              /// Menu Wireframe
+              PopupMenuItem<String>(
+                value: WireframeTheme().name,
+                child: Semantics(
+                  value: currentTheme.runtimeType == WireframeTheme ? context.l10n.app_common_selected_a11y : context.l10n.app_common_unselected_a11y,
+                  child: Row(
+                    children: [
+                      if (currentTheme.runtimeType == WireframeTheme)
+                        const Icon(
+                          Icons.check,
+                          size: 20,
+                        ),
+                      const SizedBox(width: 10),
+                      Text(WireframeTheme().name),
+                    ],
+                  ),
+                ),
+              ),
             ];
           },
         ),

app/lib/ui/tokens/color/color_tokens_model.dart

@@ -43,7 +43,6 @@ class ColorTokensModel {
         ColorTokenItem(name: 'alwaysWhite', value: theme.colorScheme(context).alwaysWhite),
       ],
       context.l10n.app_tokens_color_background_label: [
-        ColorTokenItem(name: 'bgEmphasized', value: theme.colorScheme(context).bgEmphasized),
         ColorTokenItem(name: 'bgPrimary', value: theme.colorScheme(context).bgPrimary),
         ColorTokenItem(name: 'bgSecondary', value: theme.colorScheme(context).bgSecondary),
         ColorTokenItem(name: 'bgTertiary', value: theme.colorScheme(context).bgTertiary),
@@ -79,9 +78,6 @@ class ColorTokensModel {
         ColorTokenItem(name: 'contentOnBrandPrimary', value: theme.colorScheme(context).contentOnBrandPrimary),
         ColorTokenItem(name: 'contentOnBrandSecondary', value: theme.colorScheme(context).contentOnBrandSecondary),
         ColorTokenItem(name: 'contentOnBrandTertiary', value: theme.colorScheme(context).contentOnBrandTertiary),
-        ColorTokenItem(name: 'contentOnOverlayEmphasized', value: theme.colorScheme(context).contentOnOverlayEmphasized),
-        ColorTokenItem(name: 'contentOnStatusNeutralEmphasized', value: theme.colorScheme(context).contentOnStatusNeutralEmphasized),
-        ColorTokenItem(name: 'contentOnStatusNeutralMuted', value: theme.colorScheme(context).contentOnStatusNeutralMuted),
         ColorTokenItem(name: 'contentOnStatusPositiveEmphasized', value: theme.colorScheme(context).contentOnStatusPositiveEmphasized),
         ColorTokenItem(name: 'contentOnStatusInfoEmphasized', value: theme.colorScheme(context).contentOnStatusInfoEmphasized),
         ColorTokenItem(name: 'contentOnStatusInfoMuted', value: theme.colorScheme(context).contentOnStatusInfoMuted),
@@ -95,53 +91,8 @@ class ColorTokensModel {
         ColorTokenItem(name: 'contentStatusPositive', value: theme.colorScheme(context).contentStatusPositive),
         ColorTokenItem(name: 'contentStatusWarning', value: theme.colorScheme(context).contentStatusWarning),
       ],
-      context.l10n.app_tokens_color_decorative_label: [
-        ColorTokenItem(name: 'decorativeAccent1Default', value: theme.colorScheme(context).decorativeAccent1Default),
-        ColorTokenItem(name: 'decorativeAccent1Emphasized', value: theme.colorScheme(context).decorativeAccent1Emphasized),
-        ColorTokenItem(name: 'decorativeAccent1Muted', value: theme.colorScheme(context).decorativeAccent1Muted),
-        ColorTokenItem(name: 'decorativeAccent2Default', value: theme.colorScheme(context).decorativeAccent2Default),
-        ColorTokenItem(name: 'decorativeAccent2Emphasized', value: theme.colorScheme(context).decorativeAccent2Emphasized),
-        ColorTokenItem(name: 'decorativeAccent2Muted', value: theme.colorScheme(context).decorativeAccent2Muted),
-        ColorTokenItem(name: 'decorativeAccent3Default', value: theme.colorScheme(context).decorativeAccent3Default),
-        ColorTokenItem(name: 'decorativeAccent3Emphasized', value: theme.colorScheme(context).decorativeAccent3Emphasized),
-        ColorTokenItem(name: 'decorativeAccent3Muted', value: theme.colorScheme(context).decorativeAccent3Muted),
-        ColorTokenItem(name: 'decorativeAccent4Default', value: theme.colorScheme(context).decorativeAccent4Default),
-        ColorTokenItem(name: 'decorativeAccent4Emphasized', value: theme.colorScheme(context).decorativeAccent4Emphasized),
-        ColorTokenItem(name: 'decorativeAccent4Muted', value: theme.colorScheme(context).decorativeAccent4Muted),
-        ColorTokenItem(name: 'decorativeAccent5Default', value: theme.colorScheme(context).decorativeAccent5Default),
-        ColorTokenItem(name: 'decorativeAccent5Emphasized', value: theme.colorScheme(context).decorativeAccent5Emphasized),
-        ColorTokenItem(name: 'decorativeAccent5Muted', value: theme.colorScheme(context).decorativeAccent5Muted),
-        ColorTokenItem(name: 'decorativeBrandPrimary', value: theme.colorScheme(context).decorativeBrandPrimary),
-        ColorTokenItem(name: 'decorativeBrandSecondary', value: theme.colorScheme(context).decorativeBrandSecondary),
-        ColorTokenItem(name: 'decorativeBrandTertiary', value: theme.colorScheme(context).decorativeBrandTertiary),
-        ColorTokenItem(name: 'decorativeNeutralEmphasizedHigh', value: theme.colorScheme(context).decorativeNeutralEmphasizedHigh),
-        ColorTokenItem(name: 'decorativeNeutralEmphasizedHigher', value: theme.colorScheme(context).decorativeNeutralEmphasizedHigher),
-        ColorTokenItem(name: 'decorativeNeutralEmphasizedHighest', value: theme.colorScheme(context).decorativeNeutralEmphasizedHighest),
-        ColorTokenItem(name: 'decorativeNeutralEmphasizedLow', value: theme.colorScheme(context).decorativeNeutralEmphasizedLow),
-        ColorTokenItem(name: 'decorativeNeutralEmphasizedLower', value: theme.colorScheme(context).decorativeNeutralEmphasizedLower),
-        ColorTokenItem(name: 'decorativeNeutralEmphasizedLowest', value: theme.colorScheme(context).decorativeNeutralEmphasizedLowest),
-        ColorTokenItem(name: 'decorativeNeutralEmphasizedMedium', value: theme.colorScheme(context).decorativeNeutralEmphasizedMedium),
-        ColorTokenItem(name: 'decorativeNeutralMutedHigh', value: theme.colorScheme(context).decorativeNeutralMutedHigh),
-        ColorTokenItem(name: 'decorativeNeutralMutedHigher', value: theme.colorScheme(context).decorativeNeutralMutedHigher),
-        ColorTokenItem(name: 'decorativeNeutralMutedHighest', value: theme.colorScheme(context).decorativeNeutralMutedHighest),
-        ColorTokenItem(name: 'decorativeNeutralMutedLower', value: theme.colorScheme(context).decorativeNeutralMutedLower),
-        ColorTokenItem(name: 'decorativeNeutralMutedLowest', value: theme.colorScheme(context).decorativeNeutralMutedLowest),
-        ColorTokenItem(name: 'decorativeNeutralMutedLow', value: theme.colorScheme(context).decorativeNeutralMutedLow),
-        ColorTokenItem(name: 'decorativeNeutralMutedMedium', value: theme.colorScheme(context).decorativeNeutralMutedMedium),
-        ColorTokenItem(name: 'decorativeSkinTint100', value: theme.colorScheme(context).decorativeSkinTint100),
-        ColorTokenItem(name: 'decorativeSkinTint200', value: theme.colorScheme(context).decorativeSkinTint200),
-        ColorTokenItem(name: 'decorativeSkinTint300', value: theme.colorScheme(context).decorativeSkinTint300),
-        ColorTokenItem(name: 'decorativeSkinTint400', value: theme.colorScheme(context).decorativeSkinTint400),
-        ColorTokenItem(name: 'decorativeSkinTint500', value: theme.colorScheme(context).decorativeSkinTint500),
-        ColorTokenItem(name: 'decorativeSkinTint600', value: theme.colorScheme(context).decorativeSkinTint600),
-        ColorTokenItem(name: 'decorativeSkinTint700', value: theme.colorScheme(context).decorativeSkinTint700),
-        ColorTokenItem(name: 'decorativeSkinTint800', value: theme.colorScheme(context).decorativeSkinTint800),
-        ColorTokenItem(name: 'decorativeSkinTint900', value: theme.colorScheme(context).decorativeSkinTint900),
-      ],
       context.l10n.app_tokens_color_overlay_label: [
-        ColorTokenItem(name: 'overlayDefault', value: theme.colorScheme(context).overlayDefault),
         ColorTokenItem(name: 'overlayDrag', value: theme.colorScheme(context).overlayDrag),
-        ColorTokenItem(name: 'overlayEmphasized', value: theme.colorScheme(context).overlayEmphasized),
         ColorTokenItem(name: 'overlayModal', value: theme.colorScheme(context).overlayModal),
       ],
       context.l10n.app_tokens_color_repository_label: [
@@ -178,10 +129,6 @@ class ColorTokensModel {
         ColorTokenItem(name: 'repositoryOpacityBlackMediumLow', value: theme.colorScheme(context).repositoryOpacityBlackMediumLow),
         ColorTokenItem(name: 'repositoryOpacityBlackMediumHigh', value: theme.colorScheme(context).repositoryOpacityBlackMediumHigh),
         ColorTokenItem(name: 'repositoryOpacityBlackTransparent', value: theme.colorScheme(context).repositoryOpacityBlackTransparent),
-        ColorTokenItem(name: 'repositoryOpacityInfo', value: theme.colorScheme(context).repositoryOpacityInfo),
-        ColorTokenItem(name: 'repositoryOpacityNegative', value: theme.colorScheme(context).repositoryOpacityNegative),
-        ColorTokenItem(name: 'repositoryOpacityPositive', value: theme.colorScheme(context).repositoryOpacityPositive),
-        ColorTokenItem(name: 'repositoryOpacityWarning', value: theme.colorScheme(context).repositoryOpacityWarning),
         ColorTokenItem(name: 'repositoryOpacityWhiteHigh', value: theme.colorScheme(context).repositoryOpacityWhiteHigh),
         ColorTokenItem(name: 'repositoryOpacityWhiteHigher', value: theme.colorScheme(context).repositoryOpacityWhiteHigher),
         ColorTokenItem(name: 'repositoryOpacityWhiteHighest', value: theme.colorScheme(context).repositoryOpacityWhiteHighest),
@@ -211,8 +158,6 @@ class ColorTokensModel {
         ColorTokenItem(name: 'surfaceStatusInfoMuted', value: theme.colorScheme(context).surfaceStatusInfoMuted),
         ColorTokenItem(name: 'surfaceStatusNegativeEmphasized', value: theme.colorScheme(context).surfaceStatusNegativeEmphasized),
         ColorTokenItem(name: 'surfaceStatusNegativeMuted', value: theme.colorScheme(context).surfaceStatusNegativeMuted),
-        ColorTokenItem(name: 'surfaceStatusNeutralEmphasized', value: theme.colorScheme(context).surfaceStatusNeutralEmphasized),
-        ColorTokenItem(name: 'surfaceStatusNeutralMuted', value: theme.colorScheme(context).surfaceStatusNeutralMuted),
         ColorTokenItem(name: 'surfaceStatusPositiveEmphasized', value: theme.colorScheme(context).surfaceStatusPositiveEmphasized),
         ColorTokenItem(name: 'surfaceStatusPositiveMuted', value: theme.colorScheme(context).surfaceStatusPositiveMuted),
         ColorTokenItem(name: 'surfaceStatusWarningEmphasized', value: theme.colorScheme(context).surfaceStatusWarningEmphasized),

app/lib/ui/tokens/elevation/elevation_screen.dart

@@ -52,7 +52,7 @@ class ElevationScreen extends StatelessWidget {
             ),
             Code(
               titleText: context.l10n.app_tokens_viewCodeExample_label,
-              code: 'OudsTheme.of(context).elevationTokens.overlayDefault',
+              code: 'OudsTheme.of(context).elevationTokens.none',
             ),
             Padding(
               padding: EdgeInsetsDirectional.all(currentTheme.spaceScheme(context).paddingInlineTwoExtraLarge),
@@ -75,12 +75,10 @@ class ElevationScreen extends StatelessWidget {
     return [
       ElevationTokenItem(name: 'none', value: currentTheme.elevationTokens.none),
       ElevationTokenItem(name: 'raised', value: currentTheme.elevationTokens.raised),
-      ElevationTokenItem(name: 'overlayDefault', value: currentTheme.elevationTokens.overlayDefault),
-      ElevationTokenItem(name: 'stickyDefault', value: currentTheme.elevationTokens.stickyDefault),
-      ElevationTokenItem(name: 'stickyEmphasized', value: currentTheme.elevationTokens.stickyEmphasized),
-      ElevationTokenItem(name: 'stickyNavigationScrolled', value: currentTheme.elevationTokens.stickyNavigationScrolled),
+      ElevationTokenItem(name: 'default_', value: currentTheme.elevationTokens.default_),
+      ElevationTokenItem(name: 'sticky', value: currentTheme.elevationTokens.sticky),
       ElevationTokenItem(name: 'drag', value: currentTheme.elevationTokens.drag),
-      ElevationTokenItem(name: 'overlayEmphasized', value: currentTheme.elevationTokens.overlayEmphasized),
+      ElevationTokenItem(name: 'emphasized', value: currentTheme.elevationTokens.emphasized),
     ];
   }
 }
@@ -105,7 +103,7 @@ class ElevationWidget extends StatelessWidget {
             child: Container(
               width: 64,
               height: 64,
-              color: currentTheme.colorScheme(context).surfaceStatusNeutralMuted,
+              color: currentTheme.colorScheme(context).surfaceSecondary,
             ),
           ),
           SizedBox(width: currentTheme.spaceScheme(context).paddingInlineTwoExtraLarge),

app/lib/ui/utilities/cards/ouds_illustration_component_card.dart

@@ -44,7 +44,7 @@ class OudsIllustrationComponentCard extends StatelessWidget {
 
     return Card.outlined(
       elevation: OudsTheme.of(context).elevationTokens.raised,
-      color: theme.colorScheme(context).overlayDefault,
+      //color: theme.colorScheme(context).overlayDrag,
       shape: const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
       child: Semantics(
         button: true,