feat(resources): ✨ introduce resources files and classes

add colors, icons and typography features

lib/src/resources/colors/colors.dart

@@ -0,0 +1,3 @@
+export 'colors_scheme.dart';
+export 'raw_colors.dart';
+export 'vanilla_colors.dart';

lib/src/resources/colors/colors_scheme.dart

@@ -0,0 +1,200 @@
+import 'dart:ui';
+
+import 'package:flutter_vanilla/flutter_vanilla.dart';
+
+/// {@template color_scheme}
+/// A set of thirteen colors that can be used to configure the
+/// color properties of most components.
+///
+/// A color scheme is used to define the colors used in a theme. Use
+/// [ThemeData.colorScheme] to specify the colors of a [ThemeData].
+///
+/// {@endtemplate}
+class ColorScheme {
+  /// Create a ColorScheme instance from the given colors.
+  ///
+  /// We recommend that you use one of the named constructors that
+  /// specify one of the standard color schemes via the
+  /// [ColorScheme.light] or [ColorScheme.dark].
+  ///
+  /// For the color parameters that are nullable, it is still recommended
+  /// that applications provide values for them. They are only nullable due
+  /// to backwards compatibility concerns.
+  ///
+  /// If a color is not provided, the closest fallback color from the given
+  /// colors will be used for it.
+  ///
+  /// * [primary]
+  /// * [onPrimary]
+  /// * [secondary]
+  /// * [onSecondary]
+  /// * [error]
+  /// * [onError]
+  /// * [background]
+  /// * [onBackground]
+  /// * [surface]
+  /// * [onSurface]
+  /// * [success]
+  /// * [onSuccess]
+  /// * [warning]
+  /// * [info]
+  ///
+  /// {@macro color_scheme}
+  const ColorScheme.raw({
+    required this.brightness,
+    required this.primary,
+    required this.onPrimary,
+    required this.secondary,
+    required this.onSecondary,
+    required this.surface,
+    required this.onSurface,
+    required this.background,
+    required this.onBackground,
+    required this.error,
+    required this.onError,
+    required this.success,
+    required this.onSuccess,
+    Color? tertiary,
+    Color? onTertiary,
+    this.warning,
+    this.info,
+  })  : _tertiary = tertiary,
+        _onTertiary = onTertiary;
+
+  /// Create a light ColorScheme,
+  /// based on the Vanilla design guidelines.
+  ///
+  /// {@macro color_scheme}
+  const ColorScheme.light()
+      : brightness = Brightness.light,
+        primary = BrandColors.ubuntuOrange,
+        onPrimary = CoreColors.text,
+        secondary = BrandColors.secondary,
+        onSecondary = CoreColors.xDark,
+        _tertiary = BrandColors.aubergine,
+        _onTertiary = CoreColors.xLight,
+        surface = CoreColors.midLight,
+        onSurface = CoreColors.text,
+        background = CoreColors.xLight,
+        onBackground = CoreColors.text,
+        error = SemanticColors.negative,
+        onError = CoreColors.xLight,
+        success = SemanticColors.positive,
+        onSuccess = CoreColors.xLight,
+        warning = SemanticColors.warningContrast,
+        info = SemanticColors.information;
+
+  /// Create a dark color scheme,
+  /// based on the Vanilla design guidelines.
+  ///
+  /// {@macro color_scheme}
+  const ColorScheme.dark()
+      : brightness = Brightness.dark,
+        primary = BrandColors.ubuntuOrange,
+        onPrimary = CoreColors.xLight,
+        secondary = BrandColors.secondary,
+        onSecondary = CoreColors.xLight,
+        _tertiary = BrandColors.aubergine,
+        _onTertiary = CoreColors.xLight,
+        surface = CoreColors.midDark,
+        onSurface = CoreColors.xLight,
+        background = CoreColors.black,
+        onBackground = CoreColors.midXLight,
+        error = SemanticColors.negativeLight,
+        onError = CoreColors.text,
+        success = SemanticColors.positiveLight,
+        onSuccess = CoreColors.text,
+        warning = SemanticColors.warningLight,
+        info = SemanticColors.information;
+
+  /// The overall brightness of this color scheme.
+  final Brightness brightness;
+
+  /// The color displayed most frequently across
+  /// your app’s screens and components.
+  final Color primary;
+
+  /// A color that's clearly legible when drawn on [primary].
+  ///
+  /// To ensure that an app is accessible, a contrast ratio between
+  /// [primary] and [onPrimary] of at least 4.5:1 is recommended. See
+  /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+  final Color onPrimary;
+
+  /// An accent color used for less prominent components in the UI, such as
+  /// filter chips, while expanding the opportunity for color expression.
+  final Color secondary;
+
+  /// A color that's clearly legible when drawn on [secondary].
+  ///
+  /// To ensure that an app is accessible, a contrast ratio between
+  /// [secondary] and [onSecondary] of at least 4.5:1 is recommended. See
+  /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+  final Color onSecondary;
+
+  final Color? _tertiary;
+
+  /// A color used as a contrasting accent that can balance [primary]
+  /// and [secondary] colors or bring heightened attention to an element,
+  /// such as an input field.
+  Color get tertiary => _tertiary ?? secondary;
+
+  final Color? _onTertiary;
+
+  /// A color that's clearly legible when drawn on [tertiary].
+  ///
+  /// To ensure that an app is accessible, a contrast ratio between
+  /// [tertiary] and [onTertiary] of at least 4.5:1 is recommended. See
+  /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+  Color get onTertiary => _onTertiary ?? onSecondary;
+
+  /// A color that typically appears behind scrollable content.
+  final Color background;
+
+  /// A color that's clearly legible when drawn on [background].
+  ///
+  /// To ensure that an app is accessible, a contrast ratio between
+  /// [background] and [onBackground] of at least 4.5:1 is recommended. See
+  /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+  final Color onBackground;
+
+  /// The background color for widgets like `Card`, `Dialog` and others.
+  final Color surface;
+
+  /// A color that's clearly legible when drawn on [surface].
+  ///
+  /// To ensure that an app is accessible, a contrast ratio between
+  /// [surface] and [onSurface] of at least 4.5:1 is recommended. See
+  /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+  final Color onSurface;
+
+  /// The color to use for input validation errors, e.g. for
+  /// ˜InputDecoration.errorText`.
+  final Color error;
+
+  /// A color that's clearly legible when drawn on [error].
+  ///
+  /// To ensure that an app is accessible, a contrast ratio between
+  /// [error] and [onError] of at least 4.5:1 is recommended. See
+  /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+  final Color onError;
+
+  /// The color to use for success messages, e.g. for
+  /// ˜InputDecoration.successText`.
+  final Color success;
+
+  /// A color that's clearly legible when drawn on [success].
+  ///
+  /// To ensure that an app is accessible, a contrast ratio between
+  /// [success] and [onSuccess] of at least 4.5:1 is recommended. See
+  /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+  final Color onSuccess;
+
+  /// The color to use for warning messages, e.g. for
+  /// ˜InputDecoration.warningText`.
+  final Color? warning;
+
+  /// The color to use for info messages, e.g. for
+  /// ˜InputDecoration.infoText`.
+  final Color? info;
+}

lib/src/resources/colors/raw_colors.dart

@@ -0,0 +1,123 @@
+import 'package:flutter_vanilla/flutter_vanilla.dart';
+
+/// This raw colors values are based on the Ubuntu Design System at Figma. </br>
+/// To see more about it, access: https://www.figma.com/file/H6MSsN3taoXXOJCPUbIImQ/Design-System-Library?node-id=803%3A9310&t=W0OglotYBvqZyM1e-1
+@immutable
+abstract class RawColors {
+  /// HEX value:
+  static const transparent = 0x00000000;
+
+  /// HEX value: #000000
+  static const black = 0xff000000;
+
+  /// HEX value: #000000 @10%
+  static const xDark = 0x1a000000;
+
+  /// HEX value: #000000
+  static const text = 0xff000000;
+
+  /// HEX value: #666666
+  static const midDark = 0xff666666;
+
+  /// HEX value: #757575
+  static const lightDark = 0xff757575;
+
+  /// HEX value: #d9d9d9
+  static const midLight = 0xffd9d9d9;
+
+  /// HEX value: #e5e5e5
+  static const midXLight = 0xffe5e5e5;
+
+  /// HEX value: #f7f7f7
+  static const light = 0xfff7f7f7;
+
+  /// HEX value: #ffffff
+  static const xLight = 0xffffffff;
+
+  /// HEX value: #0066cc
+  static const linkDefaultLightTheme = 0xff0066cc;
+
+  /// HEX value: #7d42b8
+  static const linkVisitedLightTheme = 0xff7d42b8;
+
+  /// HEX value: #6699cc
+  static const linkDefaultDarkTheme = 0xff6699cc;
+
+  /// HEX value: #a679d2
+  static const linkVisitedDarkTheme = 0xffa679d2;
+
+  /// HEX value: #0066cc
+  static const selectedHover = 0x120066cc;
+
+  /// HEX value: #0066cc
+  static const selected = 0x0d0066cc;
+
+  /// HEX value: #000000
+  static const lightThemeBackgroundActive = 0x14000000;
+
+  /// HEX value: #000000
+  static const lightThemeBackgroundHover = 0x0d000000;
+
+  /// HEX value: #000000
+  static const lightThemeHoverBg = 0x0d000000;
+
+  /// HEX value: #e95420
+  static const ubuntuOrange = 0xffe95420;
+
+  /// HEX value: #0f95a1
+  static const secondaryTeal = 0xff0f95a1;
+
+  /// HEX value: #6d286c
+  static const aubergine = 0xff6d286c;
+
+  /// HEX value: #0c8420
+  static const semanticPositive = 0xff0c8420;
+
+  /// HEX value: #095615
+  static const semanticPositiveHover = 0xff095615;
+
+  /// HEX value: #f3fff4
+  static const semanticPositiveLight = 0xfff3fff4;
+
+  /// HEX value: #ec6c04
+  static const semanticWarningContrast3 = 0xffec6c04;
+
+  /// HEX value: #f99b11
+  static const semanticCaution = 0xfff99b11;
+
+  /// HEX value: #fff9f0
+  static const semanticWarningLight = 0xfffff9f0;
+
+  /// HEX value: #c7162b
+  static const semanticNegative = 0xffc7162b;
+
+  /// HEX value: #b01326
+  static const semanticNegativeHover = 0xffb01326;
+
+  /// HEX value: #fff5f5
+  static const semanticNegativeLight = 0xfffff5f5;
+
+  /// HEX value: #24598f
+  static const semanticInformation = 0xff24598f;
+
+  /// HEX value: #0e811f
+  static const syntaxHighlightingGreen = 0xff0e811f;
+
+  /// HEX value: #a86500
+  static const syntaxHighlightingYellow = 0xffa86500;
+
+  /// HEX value: #dc3023
+  static const syntaxHighlightingRed = 0xffdc3023;
+
+  /// HEX value: #77216f
+  static const syntaxHighlightingAubergine = 0xff77216f;
+
+  /// HEX value: #757575
+  static const strokeBorderHighContrastLightTheme = 0xff757575;
+
+  /// HEX value: #000000
+  static const strokeBorderDefaultLightTheme = 0x33000000;
+
+  /// HEX value: #000000
+  static const strokeLightThemeActiveBg = 0x14000000;
+}