build: merge from upstream (#48)

chore: Add deprecation warnings to old tokens
docs: adding link to template repo

README.md

@@ -15,6 +15,20 @@ flutter: ">=3.16.0"
 
 To install `zeta_flutter`, follow the instructions [here](https://pub.dev/packages/zeta_flutter/install).
 
+## Example
+
+An example app can be found in this repo under `/example`. This shows all components in an example app, as well as a widgetbook instance.
+
+## Previewing the components
+
+To view examples of all the components in the library, you can pull this repo and run either the example app or widgetbook instance.
+
+You can also view the latest release at [Zeta](https://zeta-ds.web.app/) or the latest commits to main [here](https://zeta-flutter-main.web.app/).
+
+## Template
+
+If you are starting a new project using Zeta, we recommend starting with [Zeta Flutter Template](https://github.com/zebradevs/zeta_flutter_template). This template project handles the basic app setup, but these steps can also be followed [below](#Usage).
+
 ## Usage
 
 Zeta offers flexibility in theming through its `ZetaProvider` widget. Here's a breakdown of its features:
@@ -92,14 +106,8 @@ To tie everything together, use the `ZetaProvider` constructor. The `builder` ar
 
 With these configurations, Zeta makes it easy to achieve consistent theming throughout your Flutter application.
 
-## Viewing the components
-
-To view examples of all the components in the library, you can pull this repo and run either the example app or widgetbook instance.
-
-You can also view the latest release at [Zeta](https://zeta-ds.web.app/) or the latest commits to main [here](https://zeta-flutter-main.web.app/).
-
 ## Licensing
 
-This software is licensed with the MIT license (see [LICENSE](./LICENSE)).
+This software is licensed with the MIT license (see [LICENSE](./LICENSE) and [THIRD PARTY LICENSES](./LICENSE-3RD-PARTY)).
 
 ---

example/lib/pages/components/notification_list_example.dart

@@ -59,7 +59,7 @@ class _NotificationListItemExampleState extends State<NotificationListItemExampl
             ),
           ),
         ),
-      ].gap(ZetaSpacing.l))),
+      ].gap(ZetaSpacing.xL4))),
     );
   }
 }

example/widgetbook/pages/introduction.dart

@@ -25,7 +25,7 @@ class _IntroductionWidgetbookState extends State<IntroductionWidgetbook> {
   @override
   Widget build(BuildContext context) {
     final colors = Zeta.of(context).colors;
-    final radius = Radius.circular(ZetaSpacing.x5);
+    final radius = Radius.circular(ZetaSpacing.xL);
     final isDark = Zeta.of(context).brightness == Brightness.dark;
     final config = isDark ? MarkdownConfig.darkConfig : MarkdownConfig.defaultConfig;
 
@@ -35,7 +35,7 @@ class _IntroductionWidgetbookState extends State<IntroductionWidgetbook> {
         backgroundColor: colors.black,
         body: SingleChildScrollView(
           child: Padding(
-            padding: EdgeInsets.symmetric(vertical: ZetaSpacing.xxl, horizontal: ZetaSpacing.s),
+            padding: EdgeInsets.symmetric(vertical: ZetaSpacing.xL10, horizontal: ZetaSpacing.medium),
             child: Column(
               mainAxisSize: MainAxisSize.max,
               children: [
@@ -46,10 +46,10 @@ class _IntroductionWidgetbookState extends State<IntroductionWidgetbook> {
                   ),
                   child: Padding(
                     padding: EdgeInsets.fromLTRB(
-                      ZetaSpacing.x10,
-                      ZetaSpacing.x1 * 15,
-                      ZetaSpacing.x12,
-                      ZetaSpacing.x10,
+                      ZetaSpacing.xL6,
+                      ZetaSpacing.xL9,
+                      ZetaSpacing.xL8,
+                      ZetaSpacing.xL6,
                     ),
                     child: Row(
                       children: [
@@ -66,7 +66,7 @@ class _IntroductionWidgetbookState extends State<IntroductionWidgetbook> {
                                 ])
                               : null,
                         ),
-                        SizedBox(width: largeScreen ? ZetaSpacing.x10 : ZetaSpacing.x5),
+                        SizedBox(width: largeScreen ? ZetaSpacing.xL6 : ZetaSpacing.xL),
                         Expanded(
                           child: Text(
                             // x-release-please-start-version
@@ -85,7 +85,7 @@ class _IntroductionWidgetbookState extends State<IntroductionWidgetbook> {
                     borderRadius: BorderRadius.only(bottomLeft: radius, bottomRight: radius),
                   ),
                   width: double.infinity,
-                  padding: EdgeInsets.all(ZetaSpacing.x8),
+                  padding: EdgeInsets.all(ZetaSpacing.xL4),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
@@ -155,12 +155,12 @@ class _CodeWrapperWidget extends StatelessWidget {
         ),
         if (language.isNotEmpty)
           Positioned(
-            top: ZetaSpacing.x2,
+            top: ZetaSpacing.small,
             right: 0,
             child: SelectionContainer.disabled(
               child: Container(
                 child: Text(language),
-                padding: EdgeInsets.symmetric(vertical: ZetaSpacing.x1, horizontal: ZetaSpacing.x3),
+                padding: EdgeInsets.symmetric(vertical: ZetaSpacing.minimum, horizontal: ZetaSpacing.medium),
                 decoration: BoxDecoration(color: colors.cool.shade40, borderRadius: ZetaRadius.rounded),
               ),
             ),

lib/src/components/checkbox/checkbox.dart

@@ -179,7 +179,7 @@ class _CheckboxState extends State<_Checkbox> {
                     ? ZetaIcons.remove_round
                     : ZetaIcons.remove_sharp,
             color: !widget.disabled ? theme.colors.white : theme.colors.iconDisabled,
-            size: ZetaSpacing.x3_5,
+            size: ZetaSpacingBase.x3_5,
           );
 
     return Flex(
@@ -198,11 +198,7 @@ class _CheckboxState extends State<_Checkbox> {
                 ),
             ],
             color: _getBackground(theme),
-<<<<<<< HEAD
-            border: Border.all(color: _getBorderColor(theme), width: ZetaSpacing.x0_5),
-=======
-            border: widget.enabled ? Border.all(color: _getBorderColor(theme), width: ZetaSpacingBase.x0_5) : null,
->>>>>>> 57778e5 (update : Spacings + radii (#47))
+            border: Border.all(color: _getBorderColor(theme), width: ZetaSpacingBase.x0_5),
             borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none,
           ),
           width: ZetaSpacing.xL,

lib/src/components/list_item/notification_list_item.dart

@@ -116,36 +116,37 @@ class _ZetaNotificationListItemState extends State<ZetaNotificationListItem> {
                                 style: ZetaTextStyles.bodySmall.apply(color: colors.textDisabled),
                               ),
                             Container(
-                              padding: const EdgeInsets.all(ZetaSpacing.x0_5),
+                              padding: const EdgeInsets.all(2),
                               decoration: BoxDecoration(color: colors.surfaceNegative, borderRadius: ZetaRadius.full),
                               child: Icon(
                                 ZetaIcons.important_notification_round,
                                 color: colors.white,
-                                size: ZetaSpacing.x3,
+                                size: ZetaSpacing.medium,
                               ),
                             ),
-                          ].gap(ZetaSpacing.x1),
+                          ].gap(ZetaSpacing.minimum),
                         ),
                       ],
                     ),
                     widget.body,
-                  ].gap(ZetaSpacing.x1),
+                  ].gap(ZetaSpacing.minimum),
                 ),
               ),
-            ].gap(ZetaSpacing.x2),
+            ].gap(ZetaSpacing.small),
           ),
           Container(alignment: Alignment.centerRight, child: widget.action),
         ],
-      ).paddingAll(ZetaSpacing.x2),
+      ).paddingAll(ZetaSpacing.small),
     );
   }
 
   BoxDecoration _getStyle(ZetaColors colors) {
     return BoxDecoration(
       color: widget.notificationRead ? colors.surfacePrimary : colors.surfaceSelected,
       borderRadius: ZetaRadius.rounded,
-      border:
-          (widget.showDivider ?? false) ? Border(bottom: BorderSide(width: ZetaSpacing.x1, color: colors.blue)) : null,
+      border: (widget.showDivider ?? false)
+          ? Border(bottom: BorderSide(width: ZetaSpacing.minimum, color: colors.blue))
+          : null,
     );
   }
 }
@@ -212,13 +213,13 @@ class ZetaNotificationBadge extends StatelessWidget {
         : icon != null
             ? Icon(
                 icon,
-                size: ZetaSpacing.x12,
+                size: ZetaSpacing.xL8,
                 color: iconColor,
               )
             : ClipRRect(
                 borderRadius: ZetaRadius.rounded,
                 child: SizedBox.fromSize(
-                  size: const Size.square(ZetaSpacing.x12), // Image radius
+                  size: const Size.square(ZetaSpacing.xL8), // Image radius
                   child: image!.copyWith(fit: BoxFit.cover),
                 ),
               );

lib/src/theme/tokens.dart

@@ -4,7 +4,6 @@ import 'package:flutter/material.dart';
 ///
 /// Values are doubles, and can be used for padding, margins and other spacings.
 ///
-// TODO(thelukewalton): Refactor to match latest designs.
 /// Semantic zeta spacings.
 class ZetaSpacing {
   /// No spacing => 0px.
@@ -54,6 +53,138 @@ class ZetaSpacing {
 
   /// 11xL spacing => 96px
   static const double xL11 = ZetaSpacingBase.x15;
+
+  /// Base multiplier used to calculate spacing values.
+  @Deprecated('Use minimum instead ' 'This size has been deprecated as of 0.11.0')
+  static const double spacingBaseMultiplier = 4;
+
+  /// 2dp space.
+  @Deprecated('Use ZetaSpacingBase.x0_5 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x0_5 = spacingBaseMultiplier * 0.5;
+
+  /// 4dp space.
+  @Deprecated('Use minimum instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x1 = spacingBaseMultiplier;
+
+  /// 4dp space.
+  @Deprecated('Use minimum instead ' 'This size has been deprecated as of 0.11.0')
+  static const double xxs = spacingBaseMultiplier;
+
+  /// 8dp space.
+  @Deprecated('Use small instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x2 = spacingBaseMultiplier * 2;
+
+  /// 8dp space.
+  @Deprecated('Use small instead ' 'This size has been deprecated as of 0.11.0')
+  static const double xs = spacingBaseMultiplier * 2;
+
+  /// 10dp space.
+  @Deprecated('Use ZetaSpacingBase.x2_5 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x2_5 = spacingBaseMultiplier * 2.5;
+
+  /// 12dp space.
+  @Deprecated('Use medium instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x3 = spacingBaseMultiplier * 3;
+
+  /// 12dp space.
+  @Deprecated('Use medium instead ' 'This size has been deprecated as of 0.11.0')
+  static const double s = spacingBaseMultiplier * 3;
+
+  /// 14dp space.
+  @Deprecated('Use ZetaSpacingBase.x3_5 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x3_5 = spacingBaseMultiplier * 3.5;
+
+  /// 16dp space.
+  @Deprecated('Use large instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x4 = spacingBaseMultiplier * 4;
+
+  /// 16dp space.
+  @Deprecated('Use large instead ' 'This size has been deprecated as of 0.11.0')
+  static const double b = spacingBaseMultiplier * 4;
+
+  /// 20dp space.
+  @Deprecated('Use xL instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x5 = spacingBaseMultiplier * 5;
+
+  /// 24dp space.
+  @Deprecated('Use xL2 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x6 = spacingBaseMultiplier * 6;
+
+  /// 24dp space.
+  @Deprecated('Use xL2 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double m = spacingBaseMultiplier * 6;
+
+  /// 28dp space.
+  @Deprecated('Use xL3 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x7 = spacingBaseMultiplier * 7;
+
+  /// 30dp space.
+  @Deprecated('Use ZetaSpacingBase.x7_5 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x7_5 = spacingBaseMultiplier * 7.5;
+
+  /// 32dp space.
+  @Deprecated('Use xL4 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x8 = spacingBaseMultiplier * 8;
+
+  /// 32dp space.
+  @Deprecated('Use xL4 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double l = spacingBaseMultiplier * 8;
+
+  /// 36dp space.
+  @Deprecated('Use xL5 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x9 = spacingBaseMultiplier * 9;
+
+  /// 40dp space.
+  @Deprecated('Use xL6 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x10 = spacingBaseMultiplier * 10;
+
+  /// 44dp space.
+  @Deprecated('Use xL7 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x11 = spacingBaseMultiplier * 11;
+
+  /// 48dp space.
+  @Deprecated('Use xL8 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x12 = spacingBaseMultiplier * 12;
+
+  /// 52dp Space.
+  @Deprecated('This size has been deprecated as of 0.11.0')
+  static const double x13 = spacingBaseMultiplier * 13;
+
+  /// 56dp Space.
+  @Deprecated('Use ZetaSpacingBase.x12_5 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x14 = spacingBaseMultiplier * 14;
+
+  /// 64dp space.
+  @Deprecated('Use xL9 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x16 = spacingBaseMultiplier * 16;
+
+  /// 64dp space.
+  @Deprecated('Use xL9 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double xl = spacingBaseMultiplier * 16;
+
+  /// 80dp space.
+  @Deprecated('Use xL10 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x20 = spacingBaseMultiplier * 20;
+
+  /// 80dp space.
+  @Deprecated('Use xL10 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double xxl = spacingBaseMultiplier * 20;
+
+  /// 96dp space.
+  @Deprecated('Use xL11 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x24 = spacingBaseMultiplier * 24;
+
+  /// 96dp space.
+  @Deprecated('Use xL11 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double xxxl = spacingBaseMultiplier * 24;
+
+  /// 120dp space
+  @Deprecated('Use ZetaSpacingBase.x30 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x30 = spacingBaseMultiplier * 30;
+
+  /// 200dp space
+  @Deprecated('Use ZetaSpacingBase.x50 instead ' 'This size has been deprecated as of 0.11.0')
+  static const double x50 = spacingBaseMultiplier * 50;
 }
 
 /// Semantic zeta radii.
@@ -75,6 +206,10 @@ class ZetaRadius {
 
   /// Full radius => 360px radius.
   static const BorderRadius full = ZetaRadiusBase.x4;
+
+  /// Wide border radius; 24px radius.
+  @Deprecated('Use xL instead ' 'This size has been deprecated as of 0.11.0')
+  static const BorderRadius wide = BorderRadius.all(Radius.circular(ZetaSpacing.m));
 }
 
 ///Tokens that are used for Spacing