@nobak/design-system 1.0.0

package/lib/tokens/components.js

@@ -0,0 +1,499 @@
+var _excluded = ["header", "footer"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * Nobak Design System - Component Tokens
+ *
+ * Component-specific design tokens that define the visual style of each component.
+ * These tokens reference semantic tokens for consistency and theme-ability.
+ *
+ * Structure:
+ * - Each component has its own token namespace
+ * - Variants (primary, secondary, etc.) defined within each component
+ * - States (hover, active, disabled, focus) included for interactive elements
+ */
+
+import { semantic } from "./semantic";
+import { shadows } from "./shadows";
+
+/**
+ * Button Component Tokens
+ */
+export var button = {
+  // Primary variant (main brand actions)
+  primary: {
+    background: semantic.interactive.primary,
+    backgroundHover: semantic.interactive.primaryHover,
+    backgroundActive: semantic.interactive.primaryActive,
+    backgroundDisabled: semantic.interactive.primaryDisabled,
+    text: semantic.content.inverse,
+    textDisabled: semantic.content.disabled,
+    border: semantic.interactive.primary,
+    borderHover: semantic.interactive.primaryHover,
+    borderDisabled: semantic.border.disabled
+  },
+  // Secondary variant (alternative actions)
+  secondary: {
+    background: semantic.surface["default"],
+    backgroundHover: semantic.surface.hover,
+    backgroundActive: semantic.surface.pressed,
+    backgroundDisabled: semantic.surface.disabled,
+    text: semantic.content.primary,
+    textDisabled: semantic.content.disabled,
+    border: semantic.border["default"],
+    borderHover: semantic.border.strong,
+    borderDisabled: semantic.border.disabled
+  },
+  // Tertiary variant (minimal/ghost)
+  tertiary: {
+    background: semantic.interactive.tertiary,
+    backgroundHover: semantic.interactive.tertiaryHover,
+    backgroundActive: semantic.interactive.tertiaryActive,
+    backgroundDisabled: 'transparent',
+    text: semantic.content.primary,
+    textDisabled: semantic.content.disabled,
+    border: 'transparent'
+  },
+  // Danger variant (destructive actions)
+  danger: {
+    background: semantic.feedback.error,
+    backgroundHover: semantic.feedback.errorHover,
+    backgroundActive: semantic.feedback.error,
+    backgroundDisabled: semantic.feedback.errorSubtle,
+    text: semantic.content.inverse,
+    textDisabled: semantic.content.disabled,
+    border: semantic.feedback.error
+  },
+  // Success variant
+  success: {
+    background: semantic.feedback.success,
+    backgroundHover: semantic.feedback.successHover,
+    backgroundActive: semantic.feedback.success,
+    text: semantic.content.inverse,
+    border: semantic.feedback.success
+  }
+};
+
+/**
+ * Input Component Tokens
+ */
+export var input = {
+  "default": {
+    background: semantic.surface["default"],
+    backgroundHover: semantic.surface["default"],
+    backgroundFocus: semantic.surface["default"],
+    backgroundDisabled: semantic.surface.disabled,
+    text: semantic.content.primary,
+    textPlaceholder: semantic.content.placeholder,
+    textDisabled: semantic.content.disabled,
+    border: semantic.border["default"],
+    borderHover: semantic.border.strong,
+    borderFocus: semantic.border.focus,
+    borderDisabled: semantic.border.disabled,
+    borderError: semantic.border.error
+  }
+};
+
+/**
+ * Table Component Tokens
+ */
+export var table = {
+  // Table header
+  header: {
+    background: semantic.background.subtle,
+    backgroundHover: semantic.surface.hover,
+    text: semantic.content.primary,
+    border: semantic.border["default"]
+  },
+  // Table rows
+  row: {
+    background: semantic.surface["default"],
+    backgroundHover: semantic.surface.hover,
+    backgroundSelected: semantic.interactive.primarySubtle,
+    backgroundStriped: semantic.background.subtle,
+    text: semantic.content.primary,
+    textSecondary: semantic.content.secondary,
+    border: semantic.border.subtle
+  },
+  // Table cell
+  cell: {
+    background: 'transparent',
+    text: semantic.content.primary,
+    border: semantic.border.subtle
+  }
+};
+
+/**
+ * Card Component Tokens
+ */
+export var card = {
+  "default": {
+    background: semantic.surface["default"],
+    backgroundHover: semantic.surface["default"],
+    text: semantic.content.primary,
+    border: semantic.border["default"],
+    shadow: shadows.card
+  },
+  elevated: {
+    background: semantic.background.elevated,
+    text: semantic.content.primary,
+    border: semantic.border.subtle,
+    shadow: shadows.elevated
+  }
+};
+
+/**
+ * Modal Component Tokens
+ */
+export var modal = {
+  backdrop: semantic.overlay.backdrop,
+  background: semantic.background.elevated,
+  text: semantic.content.primary,
+  border: semantic.border.subtle,
+  shadow: shadows.modal,
+  header: {
+    background: semantic.surface["default"],
+    text: semantic.content.primary,
+    border: semantic.border["default"]
+  },
+  footer: {
+    background: semantic.surface.subtle,
+    border: semantic.border["default"]
+  }
+};
+
+/**
+ * Dropdown/Select Component Tokens
+ */
+export var dropdown = {
+  trigger: {
+    background: semantic.surface["default"],
+    backgroundHover: semantic.surface.hover,
+    backgroundActive: semantic.surface.pressed,
+    backgroundDisabled: semantic.surface.disabled,
+    text: semantic.content.primary,
+    border: semantic.border["default"],
+    borderHover: semantic.border.strong,
+    borderFocus: semantic.border.focus
+  },
+  menu: {
+    background: semantic.background.elevated,
+    border: semantic.border["default"],
+    shadow: shadows.dropdown
+  },
+  item: {
+    background: 'transparent',
+    backgroundHover: semantic.surface.hover,
+    backgroundSelected: semantic.interactive.primarySubtle,
+    text: semantic.content.primary,
+    textSelected: semantic.interactive.primary
+  }
+};
+
+/**
+ * Checkbox Component Tokens
+ */
+export var checkbox = {
+  "default": {
+    background: semantic.surface["default"],
+    backgroundChecked: semantic.interactive.primary,
+    backgroundDisabled: semantic.surface.disabled,
+    border: semantic.border["default"],
+    borderChecked: semantic.interactive.primary,
+    borderHover: semantic.border.strong,
+    borderFocus: semantic.border.focus,
+    checkmark: semantic.content.inverse
+  }
+};
+
+/**
+ * Radio Component Tokens
+ */
+export var radio = {
+  "default": {
+    background: semantic.surface["default"],
+    backgroundSelected: semantic.interactive.primary,
+    backgroundDisabled: semantic.surface.disabled,
+    border: semantic.border["default"],
+    borderSelected: semantic.interactive.primary,
+    borderHover: semantic.border.strong,
+    borderFocus: semantic.border.focus,
+    dot: semantic.content.inverse
+  }
+};
+
+/**
+ * Badge Component Tokens
+ */
+export var badge = {
+  "default": {
+    background: semantic.surface.subtle,
+    text: semantic.content.primary,
+    border: semantic.border.subtle
+  },
+  primary: {
+    background: semantic.interactive.primarySubtle,
+    text: semantic.interactive.primary,
+    border: semantic.interactive.primary
+  },
+  success: {
+    background: semantic.feedback.successSubtle,
+    text: semantic.feedback.success,
+    border: semantic.feedback.successBorder
+  },
+  warning: {
+    background: semantic.feedback.warningSubtle,
+    text: semantic.feedback.warning,
+    border: semantic.feedback.warningBorder
+  },
+  error: {
+    background: semantic.feedback.errorSubtle,
+    text: semantic.feedback.error,
+    border: semantic.feedback.errorBorder
+  },
+  info: {
+    background: semantic.feedback.infoSubtle,
+    text: semantic.feedback.info,
+    border: semantic.feedback.infoBorder
+  }
+};
+
+/**
+ * Toast/Notification Component Tokens
+ */
+export var toast = {
+  "default": {
+    background: semantic.surface["default"],
+    text: semantic.content.primary,
+    border: semantic.border["default"],
+    shadow: shadows.elevated
+  },
+  success: {
+    background: semantic.feedback.successSubtle,
+    text: semantic.content.primary,
+    border: semantic.feedback.successBorder,
+    icon: semantic.feedback.success
+  },
+  warning: {
+    background: semantic.feedback.warningSubtle,
+    text: semantic.content.primary,
+    border: semantic.feedback.warningBorder,
+    icon: semantic.feedback.warning
+  },
+  error: {
+    background: semantic.feedback.errorSubtle,
+    text: semantic.content.primary,
+    border: semantic.feedback.errorBorder,
+    icon: semantic.feedback.error
+  },
+  info: {
+    background: semantic.feedback.infoSubtle,
+    text: semantic.content.primary,
+    border: semantic.feedback.infoBorder,
+    icon: semantic.feedback.info
+  }
+};
+
+/**
+ * Tooltip Component Tokens
+ */
+export var tooltip = {
+  background: semantic.surface.inverse,
+  text: semantic.content.inverse,
+  border: semantic.border["default"],
+  shadow: shadows.tooltip
+};
+
+/**
+ * Link Component Tokens
+ */
+export var link = {
+  "default": {
+    text: semantic.interactive.link,
+    textHover: semantic.interactive.linkHover,
+    textVisited: semantic.interactive.linkVisited,
+    textDisabled: semantic.content.disabled,
+    underline: semantic.interactive.link
+  }
+};
+
+/**
+ * Divider Component Tokens
+ */
+export var divider = {
+  "default": {
+    color: semantic.border["default"]
+  },
+  subtle: {
+    color: semantic.border.subtle
+  },
+  strong: {
+    color: semantic.border.strong
+  }
+};
+
+/**
+ * Skeleton Loader Component Tokens
+ */
+export var skeleton = {
+  background: semantic.special.skeleton,
+  shimmer: semantic.special.skeletonShimmer
+};
+
+/**
+ * Combined Component Tokens Export
+ */
+export var componentTokens = {
+  button: button,
+  input: input,
+  table: table,
+  card: card,
+  modal: modal,
+  dropdown: dropdown,
+  checkbox: checkbox,
+  radio: radio,
+  badge: badge,
+  toast: toast,
+  tooltip: tooltip,
+  link: link,
+  divider: divider,
+  skeleton: skeleton
+};
+
+/**
+ * Type Exports
+ */
+
+/**
+ * CSS Custom Properties Generator for Component Tokens
+ */
+export var generateComponentCSSVariables = function generateComponentCSSVariables() {
+  var vars = {};
+
+  // Button tokens
+  Object.entries(button).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      variant = _ref2[0],
+      tokens = _ref2[1];
+    Object.entries(tokens).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+      vars["--button-".concat(variant, "-").concat(key)] = value;
+    });
+  });
+
+  // Input tokens
+  Object.entries(input["default"]).forEach(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+      key = _ref6[0],
+      value = _ref6[1];
+    vars["--input-".concat(key)] = value;
+  });
+
+  // Table tokens
+  Object.entries(table).forEach(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      section = _ref8[0],
+      tokens = _ref8[1];
+    Object.entries(tokens).forEach(function (_ref9) {
+      var _ref0 = _slicedToArray(_ref9, 2),
+        key = _ref0[0],
+        value = _ref0[1];
+      vars["--table-".concat(section, "-").concat(key)] = value;
+    });
+  });
+
+  // Card tokens
+  Object.entries(card).forEach(function (_ref1) {
+    var _ref10 = _slicedToArray(_ref1, 2),
+      variant = _ref10[0],
+      tokens = _ref10[1];
+    Object.entries(tokens).forEach(function (_ref11) {
+      var _ref12 = _slicedToArray(_ref11, 2),
+        key = _ref12[0],
+        value = _ref12[1];
+      vars["--card-".concat(variant, "-").concat(key)] = value;
+    });
+  });
+
+  // Modal tokens
+  var modalHeader = modal.header,
+    modalFooter = modal.footer,
+    modalBase = _objectWithoutProperties(modal, _excluded);
+  Object.entries(modalBase).forEach(function (_ref13) {
+    var _ref14 = _slicedToArray(_ref13, 2),
+      key = _ref14[0],
+      value = _ref14[1];
+    vars["--modal-".concat(key)] = value;
+  });
+  Object.entries(modalHeader).forEach(function (_ref15) {
+    var _ref16 = _slicedToArray(_ref15, 2),
+      key = _ref16[0],
+      value = _ref16[1];
+    vars["--modal-header-".concat(key)] = value;
+  });
+  Object.entries(modalFooter).forEach(function (_ref17) {
+    var _ref18 = _slicedToArray(_ref17, 2),
+      key = _ref18[0],
+      value = _ref18[1];
+    vars["--modal-footer-".concat(key)] = value;
+  });
+
+  // Badge tokens
+  Object.entries(badge).forEach(function (_ref19) {
+    var _ref20 = _slicedToArray(_ref19, 2),
+      variant = _ref20[0],
+      tokens = _ref20[1];
+    Object.entries(tokens).forEach(function (_ref21) {
+      var _ref22 = _slicedToArray(_ref21, 2),
+        key = _ref22[0],
+        value = _ref22[1];
+      vars["--badge-".concat(variant, "-").concat(key)] = value;
+    });
+  });
+
+  // Toast tokens
+  Object.entries(toast).forEach(function (_ref23) {
+    var _ref24 = _slicedToArray(_ref23, 2),
+      variant = _ref24[0],
+      tokens = _ref24[1];
+    Object.entries(tokens).forEach(function (_ref25) {
+      var _ref26 = _slicedToArray(_ref25, 2),
+        key = _ref26[0],
+        value = _ref26[1];
+      vars["--toast-".concat(variant, "-").concat(key)] = value;
+    });
+  });
+
+  // Tooltip tokens
+  Object.entries(tooltip).forEach(function (_ref27) {
+    var _ref28 = _slicedToArray(_ref27, 2),
+      key = _ref28[0],
+      value = _ref28[1];
+    vars["--tooltip-".concat(key)] = value;
+  });
+
+  // Link tokens
+  Object.entries(link["default"]).forEach(function (_ref29) {
+    var _ref30 = _slicedToArray(_ref29, 2),
+      key = _ref30[0],
+      value = _ref30[1];
+    vars["--link-".concat(key)] = value;
+  });
+
+  // Skeleton tokens
+  Object.entries(skeleton).forEach(function (_ref31) {
+    var _ref32 = _slicedToArray(_ref31, 2),
+      key = _ref32[0],
+      value = _ref32[1];
+    vars["--skeleton-".concat(key)] = value;
+  });
+  return vars;
+};

package/lib/tokens/index.js

@@ -0,0 +1,84 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Nobak Design System - Design Tokens
+ *
+ * Punk Rock Minimal Japanese Aesthetic
+ *
+ * Export all design tokens for use throughout the system
+ */
+
+// Foundation tokens
+export * from "./colors";
+export * from "./typography";
+export * from "./spacing";
+export * from "./shadows";
+export * from "./borders";
+export * from "./motion";
+
+// Semantic & Component tokens
+export * from "./semantic";
+export * from "./components";
+export * from "./lighting";
+import { colors, generateCSSVariables as generateColorVars, tailwindColors } from "./colors";
+import { typography, generateTypographyVariables, tailwindTypography } from "./typography";
+import { spacing, generateSpacingVariables, tailwindSpacing } from "./spacing";
+import { shadows, generateShadowVariables, tailwindShadows } from "./shadows";
+import { borders, generateBorderVariables, tailwindBorders } from "./borders";
+import { motion, generateMotionVariables, tailwindMotion } from "./motion";
+import { semantic, generateSemanticCSSVariables, tailwindSemantic } from "./semantic";
+import { componentTokens, generateComponentCSSVariables } from "./components";
+import { lighting, lightingContexts, generateLightingCSSVariables } from "./lighting";
+
+// Combined tokens export
+export var tokens = {
+  colors: colors,
+  typography: typography,
+  spacing: spacing,
+  shadows: shadows,
+  borders: borders,
+  motion: motion,
+  semantic: semantic,
+  components: componentTokens,
+  lighting: lighting,
+  lightingContexts: lightingContexts
+};
+
+// Generate all CSS custom properties
+export var generateAllCSSVariables = function generateAllCSSVariables() {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, generateColorVars()), generateTypographyVariables()), generateSpacingVariables()), generateShadowVariables()), generateBorderVariables()), generateMotionVariables()), generateSemanticCSSVariables()), generateComponentCSSVariables()), generateLightingCSSVariables());
+};
+
+// Tailwind config export
+export var tailwindTokens = _objectSpread(_objectSpread(_objectSpread({
+  colors: _objectSpread(_objectSpread({}, tailwindColors), tailwindSemantic)
+}, tailwindTypography), {}, {
+  spacing: tailwindSpacing,
+  boxShadow: tailwindShadows
+}, tailwindBorders), tailwindMotion);
+
+// CSS variables as a string (for injection)
+export var cssVariablesString = function cssVariablesString() {
+  var vars = generateAllCSSVariables();
+  return Object.entries(vars).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return "  ".concat(key, ": ").concat(value, ";");
+  }).join(': ');
+};
+
+// Generate CSS :root block
+export var generateRootCSS = function generateRootCSS() {
+  return ":root {\n".concat(cssVariablesString(), "\n}");
+};