diff --git a/integration_test/desktop/env_manager_test.dart b/integration_test/desktop/env_manager_test.dart index 8b35fe4b..2b3667ec 100644 --- a/integration_test/desktop/env_manager_test.dart +++ b/integration_test/desktop/env_manager_test.dart @@ -1,5 +1,5 @@ import 'dart:ui'; - +import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:spot/spot.dart'; @@ -23,9 +23,8 @@ Future runDesktopEnvIntegrationTest() async { const unknown = "unknown"; const expectedCurlCode = "curl --url '$testEndpoint$envVarValue'"; - apidashWidgetTest( - "Testing Environment Manager in desktop end-to-end", kExpandedWindowWidth, - (WidgetTester tester, helper) async { + apidashWidgetTest("Testing Environment Manager in desktop end-to-end", + WindowWidth.expanded.value, (WidgetTester tester, helper) async { await tester.pumpUntilFound(find.byType(DashApp)); await Future.delayed(const Duration(seconds: 1)); diff --git a/integration_test/desktop/his_request_test.dart b/integration_test/desktop/his_request_test.dart index b643d7e6..0594a29d 100644 --- a/integration_test/desktop/his_request_test.dart +++ b/integration_test/desktop/his_request_test.dart @@ -1,6 +1,6 @@ +import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:apidash/app.dart'; -import 'package:apidash/consts.dart'; import 'package:apidash/widgets/widgets.dart'; import '../../test/extensions/widget_tester_extensions.dart'; import '../test_helper.dart'; @@ -10,9 +10,8 @@ Future main() async { } Future runDesktopHisIntegrationTest() async { - apidashWidgetTest( - "Testing History of Requests in desktop end-to-end", kExpandedWindowWidth, - (WidgetTester tester, helper) async { + apidashWidgetTest("Testing History of Requests in desktop end-to-end", + WindowWidth.expanded.value, (WidgetTester tester, helper) async { await tester.pumpUntilFound(find.byType(DashApp)); await Future.delayed(const Duration(seconds: 1)); diff --git a/integration_test/desktop/req_editor_test.dart b/integration_test/desktop/req_editor_test.dart index a3f81ddd..01397640 100644 --- a/integration_test/desktop/req_editor_test.dart +++ b/integration_test/desktop/req_editor_test.dart @@ -1,3 +1,4 @@ +import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:spot/spot.dart'; import 'package:apidash/app.dart'; @@ -22,9 +23,8 @@ Future runDesktopReqIntegrationTest() async { "data": "870K" }'''; - apidashWidgetTest( - "Testing Request Editor in desktop end-to-end", kExpandedWindowWidth, - (WidgetTester tester, helper) async { + apidashWidgetTest("Testing Request Editor in desktop end-to-end", + WindowWidth.expanded.value, (WidgetTester tester, helper) async { await tester.pumpUntilFound(find.byType(DashApp)); await Future.delayed(const Duration(seconds: 1)); diff --git a/integration_test/mobile/env_manager_test.dart b/integration_test/mobile/env_manager_test.dart index 0fd810fd..8d482f44 100644 --- a/integration_test/mobile/env_manager_test.dart +++ b/integration_test/mobile/env_manager_test.dart @@ -1,5 +1,5 @@ import 'dart:ui'; - +import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:spot/spot.dart'; @@ -24,9 +24,8 @@ Future runMobileEnvIntegrationTest() async { const unknown = "unknown"; const expectedCurlCode = "curl --url '$testEndpoint$envVarValue'"; - apidashWidgetTest( - "Testing Environment Manager in mobile end-to-end", kCompactWindowWidth, - (WidgetTester tester, helper) async { + apidashWidgetTest("Testing Environment Manager in mobile end-to-end", + WindowWidth.compact.value, (WidgetTester tester, helper) async { await tester.pumpUntilFound(find.byType(DashApp)); await Future.delayed(const Duration(seconds: 1)); diff --git a/integration_test/mobile/his_request_test.dart b/integration_test/mobile/his_request_test.dart index 995284e0..a73393dd 100644 --- a/integration_test/mobile/his_request_test.dart +++ b/integration_test/mobile/his_request_test.dart @@ -1,3 +1,4 @@ +import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:spot/spot.dart'; @@ -13,9 +14,8 @@ Future main() async { } Future runMobileHisIntegrationTest() async { - apidashWidgetTest( - "Testing History of Requests in mobile end-to-end", kCompactWindowWidth, - (WidgetTester tester, helper) async { + apidashWidgetTest("Testing History of Requests in mobile end-to-end", + WindowWidth.compact.value, (WidgetTester tester, helper) async { await tester.pumpUntilFound(find.byType(DashApp)); await Future.delayed(const Duration(seconds: 1)); diff --git a/integration_test/mobile/req_editor_test.dart b/integration_test/mobile/req_editor_test.dart index 738d2fc4..245e7e6c 100644 --- a/integration_test/mobile/req_editor_test.dart +++ b/integration_test/mobile/req_editor_test.dart @@ -1,3 +1,4 @@ +import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:spot/spot.dart'; @@ -24,7 +25,7 @@ Future runMobileReqIntegrationTest() async { }'''; apidashWidgetTest( - "Testing Request Editor in mobile end-to-end", kCompactWindowWidth, + "Testing Request Editor in mobile end-to-end", WindowWidth.compact.value, (WidgetTester tester, helper) async { await tester.pumpUntilFound(find.byType(DashApp)); await Future.delayed(const Duration(seconds: 1)); diff --git a/lib/consts.dart b/lib/consts.dart index 2189249a..3162cea6 100644 --- a/lib/consts.dart +++ b/lib/consts.dart @@ -30,10 +30,6 @@ const kMinWindowSize = Size(320, 640); const kMinInitialWindowWidth = 1200.0; const kMinInitialWindowHeight = 800.0; const kMinRequestEditorDetailsCardPaneSize = 300.0; -const kCompactWindowWidth = 600.0; -const kMediumWindowWidth = 840.0; -const kExpandedWindowWidth = 1200.0; -const kLargeWindowWidth = 1600.0; final kHomeScaffoldKey = GlobalKey(); final kEnvScaffoldKey = GlobalKey(); diff --git a/lib/extensions/context_extensions.dart b/lib/extensions/context_extensions.dart index 69f97893..a8486b09 100644 --- a/lib/extensions/context_extensions.dart +++ b/lib/extensions/context_extensions.dart @@ -1,20 +1,21 @@ -import 'package:apidash/consts.dart'; +import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter/material.dart'; extension MediaQueryExtension on BuildContext { bool get isCompactWindow => - MediaQuery.of(this).size.width < kCompactWindowWidth; + MediaQuery.of(this).size.width < WindowWidth.compact.value; bool get isMediumWindow => - MediaQuery.of(this).size.width < kMediumWindowWidth; + MediaQuery.of(this).size.width < WindowWidth.medium.value; bool get isExpandedWindow => - MediaQuery.of(this).size.width < kExpandedWindowWidth; + MediaQuery.of(this).size.width < WindowWidth.expanded.value; - bool get isLargeWindow => MediaQuery.of(this).size.width < kLargeWindowWidth; + bool get isLargeWindow => + MediaQuery.of(this).size.width < WindowWidth.large.value; bool get isExtraLargeWindow => - MediaQuery.of(this).size.width > kLargeWindowWidth; + MediaQuery.of(this).size.width > WindowWidth.large.value; double get width => MediaQuery.of(this).size.width; diff --git a/lib/screens/envvar/environments_pane.dart b/lib/screens/envvar/environments_pane.dart index 7939fbc0..94ae8ac6 100644 --- a/lib/screens/envvar/environments_pane.dart +++ b/lib/screens/envvar/environments_pane.dart @@ -17,9 +17,7 @@ class EnvironmentsPane extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { return Padding( - padding: (!context.isMediumWindow && kIsMacOS - ? kP24CollectionPane - : kP8CollectionPane) + + padding: (!context.isMediumWindow && kIsMacOS ? kPt24l4 : kPt8l4) + (context.isMediumWindow ? kPb70 : EdgeInsets.zero), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, diff --git a/lib/screens/history/history_details.dart b/lib/screens/history/history_details.dart index 196e4a33..43a0e8f5 100644 --- a/lib/screens/history/history_details.dart +++ b/lib/screens/history/history_details.dart @@ -29,7 +29,7 @@ class _HistoryDetailsState extends ConsumerState return selectedHistoryRequest != null ? LayoutBuilder( builder: (context, constraints) { - final isCompact = constraints.maxWidth < kMediumWindowWidth; + final isCompact = constraints.maxWidth < WindowWidth.medium.value; return Column( children: [ kVSpacer5, diff --git a/lib/screens/history/history_widgets/his_url_card.dart b/lib/screens/history/history_widgets/his_url_card.dart index 80d9a946..7ce5833c 100644 --- a/lib/screens/history/history_widgets/his_url_card.dart +++ b/lib/screens/history/history_widgets/his_url_card.dart @@ -22,7 +22,7 @@ class HistoryURLCard extends StatelessWidget { return LayoutBuilder(builder: (context, constraints) { final isCompact = constraints.maxWidth <= kMinWindowSize.width; - final isExpanded = constraints.maxWidth >= kMediumWindowWidth - 8; + final isExpanded = constraints.maxWidth >= WindowWidth.medium.value - 8; return Card( color: kColorTransparent, surfaceTintColor: kColorTransparent, diff --git a/lib/screens/home_page/collection_pane.dart b/lib/screens/home_page/collection_pane.dart index aaffe9bc..9c389ad9 100644 --- a/lib/screens/home_page/collection_pane.dart +++ b/lib/screens/home_page/collection_pane.dart @@ -24,9 +24,7 @@ class CollectionPane extends ConsumerWidget { ); } return Padding( - padding: (!context.isMediumWindow && kIsMacOS - ? kP24CollectionPane - : kP8CollectionPane) + + padding: (!context.isMediumWindow && kIsMacOS ? kPt24l4 : kPt8l4) + (context.isMediumWindow ? kPb70 : EdgeInsets.zero), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, diff --git a/packages/apidash_design_system/lib/apidash_design_system.dart b/packages/apidash_design_system/lib/apidash_design_system.dart index c8d6ff3e..90215780 100644 --- a/packages/apidash_design_system/lib/apidash_design_system.dart +++ b/packages/apidash_design_system/lib/apidash_design_system.dart @@ -1,5 +1,5 @@ library apidash_design_system; export 'package:google_fonts/google_fonts.dart'; +export 'tokens/tokens.dart'; export 'widgets/widgets.dart'; -export 'consts.dart'; diff --git a/packages/apidash_design_system/lib/tokens/colors.dart b/packages/apidash_design_system/lib/tokens/colors.dart new file mode 100644 index 00000000..287b70b6 --- /dev/null +++ b/packages/apidash_design_system/lib/tokens/colors.dart @@ -0,0 +1,30 @@ +import 'package:flutter/material.dart'; + +final kColorTransparentState = + WidgetStateProperty.all(Colors.transparent); +const kColorTransparent = Colors.transparent; +const kColorWhite = Colors.white; +const kColorBlack = Colors.black; +const kColorRed = Colors.red; +final kColorLightDanger = Colors.red.withOpacity(0.9); +const kColorDarkDanger = Color(0xffcf6679); + +const kColorSchemeSeed = Colors.blue; + +final kColorStatusCodeDefault = Colors.grey.shade700; +final kColorStatusCode200 = Colors.green.shade800; +final kColorStatusCode300 = Colors.blue.shade800; +final kColorStatusCode400 = Colors.red.shade800; +final kColorStatusCode500 = Colors.amber.shade900; + +final kColorHttpMethodGet = Colors.green.shade800; +final kColorHttpMethodHead = kColorHttpMethodGet; +final kColorHttpMethodPost = Colors.blue.shade800; +final kColorHttpMethodPut = Colors.amber.shade900; +final kColorHttpMethodPatch = kColorHttpMethodPut; +final kColorHttpMethodDelete = Colors.red.shade800; + +const kHintOpacity = 0.6; +const kForegroundOpacity = 0.05; +const kOverlayBackgroundOpacity = 0.5; +const kOpacityDarkModeBlend = 0.4; diff --git a/packages/apidash_design_system/lib/tokens/measurements.dart b/packages/apidash_design_system/lib/tokens/measurements.dart new file mode 100644 index 00000000..7a535cab --- /dev/null +++ b/packages/apidash_design_system/lib/tokens/measurements.dart @@ -0,0 +1,94 @@ +import 'package:flutter/material.dart'; + +enum WindowWidth { + compact(600.0), + medium(840.0), + expanded(1200.0), + large(1600.0); + + const WindowWidth(this.value); + final double value; +} + +const kBorderRadius4 = BorderRadius.all(Radius.circular(4)); +const kBorderRadius6 = BorderRadius.all(Radius.circular(6)); +const kBorderRadius8 = BorderRadius.all(Radius.circular(8)); +final kBorderRadius10 = BorderRadius.circular(10); +const kBorderRadius12 = BorderRadius.all(Radius.circular(12)); +const kBorderRadius20 = BorderRadius.all(Radius.circular(20)); + +const kP1 = EdgeInsets.all(1); +const kP4 = EdgeInsets.all(4); +const kP5 = EdgeInsets.all(5); +const kP6 = EdgeInsets.all(6); +const kP8 = EdgeInsets.all(8); +const kPs8 = EdgeInsets.only(left: 8); +const kPs2 = EdgeInsets.only(left: 2); +const kPe4 = EdgeInsets.only(right: 4); +const kPe8 = EdgeInsets.only(right: 8); +const kPh20v5 = EdgeInsets.symmetric(horizontal: 20, vertical: 5); +const kPh20v10 = EdgeInsets.symmetric(horizontal: 20, vertical: 10); +const kP10 = EdgeInsets.all(10); +const kPv2 = EdgeInsets.symmetric(vertical: 2); +const kPv6 = EdgeInsets.symmetric(vertical: 6); +const kPv8 = EdgeInsets.symmetric(vertical: 8); +const kPv10 = EdgeInsets.symmetric(vertical: 10); +const kPv20 = EdgeInsets.symmetric(vertical: 20); +const kPh2 = EdgeInsets.symmetric(horizontal: 2); +const kPt28o8 = EdgeInsets.only(top: 28, left: 8.0, right: 8.0, bottom: 8.0); +const kPt5o10 = + EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0, bottom: 10.0); +const kPh4 = EdgeInsets.symmetric(horizontal: 4); +const kPh8 = EdgeInsets.symmetric(horizontal: 8); +const kPh12 = EdgeInsets.symmetric(horizontal: 12); +const kPh20 = EdgeInsets.symmetric(horizontal: 20); +const kPh24 = EdgeInsets.symmetric(horizontal: 24); +const kPh20t40 = EdgeInsets.only( + left: 20, + right: 20, + top: 40, +); +const kPs0o6 = EdgeInsets.only( + left: 0, + top: 6, + right: 6, + bottom: 6, +); +const kPh60 = EdgeInsets.symmetric(horizontal: 60); +const kPh60v60 = EdgeInsets.symmetric(vertical: 60, horizontal: 60); +const kPt24l4 = EdgeInsets.only( + top: 24, + left: 4.0, + //right: 4.0, + // bottom: 8.0, +); +const kPt8l4 = EdgeInsets.only( + top: 8.0, + left: 4.0, + //right: 4.0, + // bottom: 8.0, +); +const kPt8 = EdgeInsets.only(top: 8); +const kPt20 = EdgeInsets.only(top: 20); +const kPt24 = EdgeInsets.only(top: 24); +const kPt28 = EdgeInsets.only(top: 28); +const kPt32 = EdgeInsets.only(top: 32); +const kPb10 = EdgeInsets.only(bottom: 10); +const kPb15 = EdgeInsets.only(bottom: 15); +const kPb70 = EdgeInsets.only(bottom: 70); +const kSizedBoxEmpty = SizedBox(); +const kHSpacer2 = SizedBox(width: 2); +const kHSpacer4 = SizedBox(width: 4); +const kHSpacer5 = SizedBox(width: 5); +const kHSpacer10 = SizedBox(width: 10); +const kHSpacer12 = SizedBox(width: 12); +const kHSpacer20 = SizedBox(width: 20); +const kHSpacer40 = SizedBox(width: 40); +const kVSpacer5 = SizedBox(height: 5); +const kVSpacer8 = SizedBox(height: 8); +const kVSpacer10 = SizedBox(height: 10); +const kVSpacer16 = SizedBox(height: 16); +const kVSpacer20 = SizedBox(height: 20); +const kVSpacer40 = SizedBox(height: 40); + +final kButtonSidebarStyle = ElevatedButton.styleFrom(padding: kPh12); diff --git a/packages/apidash_design_system/lib/consts.dart b/packages/apidash_design_system/lib/tokens/themes.dart similarity index 50% rename from packages/apidash_design_system/lib/consts.dart rename to packages/apidash_design_system/lib/tokens/themes.dart index 043bf2e6..b323d0ca 100644 --- a/packages/apidash_design_system/lib/consts.dart +++ b/packages/apidash_design_system/lib/tokens/themes.dart @@ -1,22 +1,6 @@ -import 'dart:io'; -import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:google_fonts/google_fonts.dart'; - -final kColorTransparentState = - WidgetStateProperty.all(Colors.transparent); -const kColorTransparent = Colors.transparent; -const kColorWhite = Colors.white; -const kColorBlack = Colors.black; -const kColorRed = Colors.red; -final kColorLightDanger = Colors.red.withOpacity(0.9); -const kColorDarkDanger = Color(0xffcf6679); - -const kColorSchemeSeed = Colors.blue; -final kFontFamily = GoogleFonts.openSans().fontFamily; -final kFontFamilyFallback = !kIsWeb && (Platform.isIOS || Platform.isMacOS) - ? null - : [GoogleFonts.notoColorEmoji().fontFamily!]; +import 'colors.dart'; +import 'typography.dart'; final kLightMaterialAppTheme = ThemeData( fontFamily: kFontFamily, @@ -42,123 +26,6 @@ final kDarkMaterialAppTheme = ThemeData( ), ); -final kCodeStyle = TextStyle( - fontFamily: GoogleFonts.sourceCodePro().fontFamily, - fontFamilyFallback: kFontFamilyFallback, -); - -const kHintOpacity = 0.6; -const kForegroundOpacity = 0.05; -const kOverlayBackgroundOpacity = 0.5; - -const kTextStyleButton = TextStyle(fontWeight: FontWeight.bold); -const kTextStyleTab = TextStyle(fontSize: 14); -const kTextStyleButtonSmall = TextStyle(fontSize: 12); -const kFormDataButtonLabelTextStyle = TextStyle( - fontSize: 12, - fontWeight: FontWeight.w600, -); -const kTextStylePopupMenuItem = TextStyle(fontSize: 14); - -final kButtonSidebarStyle = ElevatedButton.styleFrom(padding: kPh12); - -const kBorderRadius4 = BorderRadius.all(Radius.circular(4)); -const kBorderRadius6 = BorderRadius.all(Radius.circular(6)); -const kBorderRadius8 = BorderRadius.all(Radius.circular(8)); -final kBorderRadius10 = BorderRadius.circular(10); -const kBorderRadius12 = BorderRadius.all(Radius.circular(12)); -const kBorderRadius20 = BorderRadius.all(Radius.circular(20)); - -const kP1 = EdgeInsets.all(1); -const kP4 = EdgeInsets.all(4); -const kP5 = EdgeInsets.all(5); -const kP6 = EdgeInsets.all(6); -const kP8 = EdgeInsets.all(8); -const kPs8 = EdgeInsets.only(left: 8); -const kPs2 = EdgeInsets.only(left: 2); -const kPe4 = EdgeInsets.only(right: 4); -const kPe8 = EdgeInsets.only(right: 8); -const kPh20v5 = EdgeInsets.symmetric(horizontal: 20, vertical: 5); -const kPh20v10 = EdgeInsets.symmetric(horizontal: 20, vertical: 10); -const kP10 = EdgeInsets.all(10); -const kPv2 = EdgeInsets.symmetric(vertical: 2); -const kPv6 = EdgeInsets.symmetric(vertical: 6); -const kPv8 = EdgeInsets.symmetric(vertical: 8); -const kPv10 = EdgeInsets.symmetric(vertical: 10); -const kPv20 = EdgeInsets.symmetric(vertical: 20); -const kPh2 = EdgeInsets.symmetric(horizontal: 2); -const kPt28o8 = EdgeInsets.only(top: 28, left: 8.0, right: 8.0, bottom: 8.0); -const kPt5o10 = - EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0, bottom: 10.0); -const kPh4 = EdgeInsets.symmetric(horizontal: 4); -const kPh8 = EdgeInsets.symmetric(horizontal: 8); -const kPh12 = EdgeInsets.symmetric(horizontal: 12); -const kPh20 = EdgeInsets.symmetric(horizontal: 20); -const kPh24 = EdgeInsets.symmetric(horizontal: 24); -const kPh20t40 = EdgeInsets.only( - left: 20, - right: 20, - top: 40, -); -const kPs0o6 = EdgeInsets.only( - left: 0, - top: 6, - right: 6, - bottom: 6, -); -const kPh60 = EdgeInsets.symmetric(horizontal: 60); -const kPh60v60 = EdgeInsets.symmetric(vertical: 60, horizontal: 60); -const kP24CollectionPane = EdgeInsets.only( - top: 24, - left: 4.0, - //right: 4.0, - // bottom: 8.0, -); -const kP8CollectionPane = EdgeInsets.only( - top: 8.0, - left: 4.0, - //right: 4.0, - // bottom: 8.0, -); -const kPt8 = EdgeInsets.only( - top: 8, -); -const kPt20 = EdgeInsets.only( - top: 20, -); -const kPt24 = EdgeInsets.only( - top: 24, -); -const kPt28 = EdgeInsets.only( - top: 28, -); -const kPt32 = EdgeInsets.only( - top: 32, -); -const kPb10 = EdgeInsets.only( - bottom: 10, -); -const kPb15 = EdgeInsets.only( - bottom: 15, -); -const kPb70 = EdgeInsets.only( - bottom: 70, -); -const kSizedBoxEmpty = SizedBox(); -const kHSpacer2 = SizedBox(width: 2); -const kHSpacer4 = SizedBox(width: 4); -const kHSpacer5 = SizedBox(width: 5); -const kHSpacer10 = SizedBox(width: 10); -const kHSpacer12 = SizedBox(width: 12); -const kHSpacer20 = SizedBox(width: 20); -const kHSpacer40 = SizedBox(width: 40); -const kVSpacer5 = SizedBox(height: 5); -const kVSpacer8 = SizedBox(height: 8); -const kVSpacer10 = SizedBox(height: 10); -const kVSpacer16 = SizedBox(height: 16); -const kVSpacer20 = SizedBox(height: 20); -const kVSpacer40 = SizedBox(height: 40); - const kLightCodeTheme = { 'root': TextStyle(backgroundColor: Color(0xffffffff), color: Color(0xff000000)), @@ -245,17 +112,3 @@ const kDarkCodeTheme = { 'type': TextStyle(color: Color(0xff82aaff)), 'variable': TextStyle(color: Color(0xffaddb67)), }; - -final kColorStatusCodeDefault = Colors.grey.shade700; -final kColorStatusCode200 = Colors.green.shade800; -final kColorStatusCode300 = Colors.blue.shade800; -final kColorStatusCode400 = Colors.red.shade800; -final kColorStatusCode500 = Colors.amber.shade900; -const kOpacityDarkModeBlend = 0.4; - -final kColorHttpMethodGet = Colors.green.shade800; -final kColorHttpMethodHead = kColorHttpMethodGet; -final kColorHttpMethodPost = Colors.blue.shade800; -final kColorHttpMethodPut = Colors.amber.shade900; -final kColorHttpMethodPatch = kColorHttpMethodPut; -final kColorHttpMethodDelete = Colors.red.shade800; diff --git a/packages/apidash_design_system/lib/tokens/tokens.dart b/packages/apidash_design_system/lib/tokens/tokens.dart new file mode 100644 index 00000000..21eb57f8 --- /dev/null +++ b/packages/apidash_design_system/lib/tokens/tokens.dart @@ -0,0 +1,4 @@ +export 'colors.dart'; +export 'measurements.dart'; +export 'themes.dart'; +export 'typography.dart'; diff --git a/packages/apidash_design_system/lib/tokens/typography.dart b/packages/apidash_design_system/lib/tokens/typography.dart new file mode 100644 index 00000000..304f91d0 --- /dev/null +++ b/packages/apidash_design_system/lib/tokens/typography.dart @@ -0,0 +1,23 @@ +import 'dart:io'; +import 'package:flutter/material.dart'; +import 'package:flutter/foundation.dart'; +import 'package:google_fonts/google_fonts.dart'; + +final kFontFamily = GoogleFonts.openSans().fontFamily; +final kFontFamilyFallback = !kIsWeb && (Platform.isIOS || Platform.isMacOS) + ? null + : [GoogleFonts.notoColorEmoji().fontFamily!]; + +final kCodeStyle = TextStyle( + fontFamily: GoogleFonts.sourceCodePro().fontFamily, + fontFamilyFallback: kFontFamilyFallback, +); + +const kTextStyleButton = TextStyle(fontWeight: FontWeight.bold); +const kTextStyleTab = TextStyle(fontSize: 14); +const kTextStyleButtonSmall = TextStyle(fontSize: 12); +const kFormDataButtonLabelTextStyle = TextStyle( + fontSize: 12, + fontWeight: FontWeight.w600, +); +const kTextStylePopupMenuItem = TextStyle(fontSize: 14); diff --git a/packages/apidash_design_system/lib/widgets/dropdown.dart b/packages/apidash_design_system/lib/widgets/dropdown.dart index ffe9834c..8aa90590 100644 --- a/packages/apidash_design_system/lib/widgets/dropdown.dart +++ b/packages/apidash_design_system/lib/widgets/dropdown.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import '../consts.dart'; +import '../tokens/tokens.dart'; class ADDropdownButton extends StatelessWidget { const ADDropdownButton({ diff --git a/packages/apidash_design_system/lib/widgets/textfield_outlined.dart b/packages/apidash_design_system/lib/widgets/textfield_outlined.dart index a160b141..60e450c6 100644 --- a/packages/apidash_design_system/lib/widgets/textfield_outlined.dart +++ b/packages/apidash_design_system/lib/widgets/textfield_outlined.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import '../consts.dart'; +import '../tokens/tokens.dart'; class ADOutlinedTextField extends StatelessWidget { const ADOutlinedTextField({ diff --git a/test/extensions/context_extensions_test.dart b/test/extensions/context_extensions_test.dart index 6b305b07..282ec929 100644 --- a/test/extensions/context_extensions_test.dart +++ b/test/extensions/context_extensions_test.dart @@ -1,6 +1,6 @@ +import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; -import 'package:apidash/consts.dart'; import 'package:apidash/extensions/context_extensions.dart'; void main() { @@ -9,7 +9,7 @@ void main() { (tester) async { await tester.pumpWidget( MediaQuery( - data: const MediaQueryData(size: Size(kCompactWindowWidth - 1, 800)), + data: MediaQueryData(size: Size(WindowWidth.compact.value - 1, 800)), child: Builder( builder: (context) { expect(context.isCompactWindow, isTrue); @@ -24,7 +24,7 @@ void main() { (tester) async { await tester.pumpWidget( MediaQuery( - data: const MediaQueryData(size: Size(kMediumWindowWidth - 1, 800)), + data: MediaQueryData(size: Size(WindowWidth.medium.value - 1, 800)), child: Builder( builder: (context) { expect(context.isMediumWindow, isTrue); @@ -39,7 +39,7 @@ void main() { (tester) async { await tester.pumpWidget( MediaQuery( - data: const MediaQueryData(size: Size(kExpandedWindowWidth - 1, 800)), + data: MediaQueryData(size: Size(WindowWidth.expanded.value - 1, 800)), child: Builder( builder: (context) { expect(context.isExpandedWindow, isTrue); @@ -54,7 +54,7 @@ void main() { (tester) async { await tester.pumpWidget( MediaQuery( - data: const MediaQueryData(size: Size(kLargeWindowWidth - 1, 800)), + data: MediaQueryData(size: Size(WindowWidth.large.value - 1, 800)), child: Builder( builder: (context) { expect(context.isLargeWindow, isTrue); @@ -69,7 +69,7 @@ void main() { (tester) async { await tester.pumpWidget( MediaQuery( - data: const MediaQueryData(size: Size(kLargeWindowWidth + 1, 800)), + data: MediaQueryData(size: Size(WindowWidth.large.value + 1, 800)), child: Builder( builder: (context) { expect(context.isExtraLargeWindow, isTrue);